/* RioGrafica · Configurador de produto
   Zero valores hardcoded: tudo vem do tokens.css carregado no child theme.
   Espelha o frame «Brochuras / Desktop» do ficheiro Figma RioGrafica · Website. */

.rg-cfg {
	/* Distancia entre seccoes do configurador (Dimensao, Papel, Gramagem,
	   Dobra, Acabamento, Quantidade, Resumo, Arte). Um unico ponto de ajuste. */
	--rg-cfg-ritmo: var(--space-40);

	/* Dentro de cada seccao: legenda -> cartoes, e cartao -> cartao.
	   Tem de ficar abaixo de --rg-cfg-ritmo para a legenda ler como
	   pertencendo ao grupo de baixo e nao ao de cima. */
	--rg-cfg-legenda-gap: var(--space-24);
	--rg-cfg-op-gap: var(--space-24);

	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	width: 100%;
}

/* ---- ritmo entre seccoes ----
   Os eixos vivem todos dentro de .rg-cfg__campos, que nao tinha regra de
   layout: os fieldsets encostavam uns aos outros e o gap de .rg-cfg so
   separava o bloco inteiro dos irmaos. Os irmaos diretos descontam o
   --space-24 que ja herdam do gap do contentor. */

.rg-cfg__campos {
	display: flex;
	flex-direction: column;
	gap: var(--rg-cfg-ritmo);
}

.rg-cfg__quantidade,
.rg-cfg__resumo,
.rg-cfg > .rg-cfg__grupo {
	margin-top: calc(var(--rg-cfg-ritmo) - var(--space-24));
}

.rg-cfg__nota {
	font-size: var(--font-size-body-s);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-secondary);
	margin: 0;
}

.rg-cfg__intro {
	font-size: var(--font-size-body-l);
	line-height: var(--font-line-height-relaxed);
	margin: 0;
}

/* ---- grupo de eixo ---- */

.rg-cfg__grupo {
	display: flex;
	flex-direction: column;
	gap: var(--space-stack, 16px);
	width: 100%;
	min-width: 0;
	border: 0;
	margin: 0;
	padding: 0;
}

.rg-cfg__legenda {
	font-family: var(--font-stack);
	font-size: var(--font-size-heading-xs);
	font-weight: var(--font-weight-medium);
	line-height: 1.3;
	color: var(--color-text-primary);
	/* <legend> e display:table e vive na border-box do fieldset: nao e um
	   flex item, por isso o gap de .rg-cfg__grupo nunca lhe chega. O espaco
	   entre o titulo e os cartoes tem de vir daqui. */
	margin: 0 0 var(--rg-cfg-legenda-gap);
	padding: 0;
}

.rg-cfg__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rg-cfg-op-gap);
	border: 0;
	margin: 0;
	padding: 0;
}

/* ---- Product Option Card ---- */

.rg-cfg__op {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 164px;
	min-width: 0;
	border: var(--border-width-sm) solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-surface-base);
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--motion-duration-base) var(--motion-easing-standard),
		background-color var(--motion-duration-base) var(--motion-easing-standard);
}

.rg-cfg__grupo--largo .rg-cfg__op {
	width: 176px;
}

.rg-cfg__op input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rg-cfg__op:hover {
	border-color: var(--color-border-strong);
}

.rg-cfg__op:has(input:checked) {
	border-width: var(--border-width-md);
	border-color: var(--color-border-focus);
	background: var(--color-surface-brand-subtle);
}

.rg-cfg__op:has(input:focus-visible) {
	outline: var(--border-width-md) solid var(--color-border-focus);
	outline-offset: 2px;
}

.rg-cfg__op--sem {
	border-style: dashed;
}

.rg-cfg__op--sem .rg-cfg__media {
	opacity: 0.45;
}

.rg-cfg__media {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 96px;
	background: var(--color-surface-sunken);
	overflow: hidden;
}

.rg-cfg__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rg-cfg__media svg {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
}

.rg-cfg__texto {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-12) var(--space-16);
	text-align: left;
}

.rg-cfg__titulo {
	font-size: 15px;
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-primary);
}

.rg-cfg__spec {
	font-size: 13px;
	line-height: var(--font-line-height-normal);
	color: var(--color-text-secondary);
}

.rg-cfg__selo {
	position: absolute;
	top: var(--space-8);
	inset-inline-end: var(--space-8);
	padding: 3px 7px;
	border: var(--border-width-sm) solid var(--color-feedback-warning-base);
	border-radius: var(--radius-full);
	background: var(--color-feedback-warning-bg);
	color: var(--color-feedback-warning-fg);
	font-size: 10px;
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--font-letter-spacing-wide);
	text-transform: uppercase;
}

/* ---- Pricing Table ---- */

.rg-cfg__tabela {
	border: var(--border-width-sm) solid var(--color-border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.rg-cfg__thead,
.rg-cfg__linha {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-12) var(--space-16);
	width: 100%;
}

.rg-cfg__thead {
	background: var(--color-surface-subtle);
	border-bottom: var(--border-width-sm) solid var(--color-border-default);
	font-size: 13px;
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
}

.rg-cfg__linha {
	min-height: 48px;
	border: 0;
	border-bottom: var(--border-width-sm) solid var(--color-border-subtle);
	background: var(--color-surface-base);
	font-family: var(--font-stack);
	font-size: var(--font-size-body-s);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-primary);
	text-align: left;
	cursor: pointer;
}

.rg-cfg__linha:last-child {
	border-bottom: 0;
}

.rg-cfg__linha:has(input:checked) {
	background: var(--color-surface-brand-subtle);
}

.rg-cfg__linha:has(input:focus-visible) {
	outline: var(--border-width-md) solid var(--color-border-focus);
	outline-offset: -2px;
}

.rg-cfg__linha input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.rg-cfg__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: var(--border-width-sm) solid var(--color-border-strong);
	border-radius: var(--radius-full);
}

.rg-cfg__linha:has(input:checked) .rg-cfg__radio {
	border: 5px solid var(--color-border-focus);
}

.rg-cfg__col-q {
	flex: 1 1 auto;
	min-width: 0;
}

.rg-cfg__col-u {
	flex: 0 0 130px;
	text-align: right;
	font-weight: var(--font-weight-regular);
	color: var(--color-text-tertiary);
	font-variant-numeric: tabular-nums;
}

.rg-cfg__col-p {
	flex: 0 0 110px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.rg-cfg__col-p--sem {
	color: var(--color-feedback-warning-fg);
	font-size: 13px;
}

.rg-cfg__outro {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}

.rg-cfg__outro input[type="number"] {
	width: 110px;
	padding: var(--space-8) var(--space-12);
	border: var(--border-width-sm) solid var(--color-border-default);
	border-radius: var(--radius-md);
	background: var(--color-surface-base);
	font-family: var(--font-stack);
	font-size: var(--font-size-body-m);
	color: var(--color-text-primary);
	position: static;
	opacity: 1;
	height: auto;
	pointer-events: auto;
}

/* ---- Resumo ---- */

.rg-cfg__resumo {
	padding: var(--space-20);
	border: var(--border-width-sm) solid var(--color-border-default);
	border-inline-start: var(--border-width-lg) solid var(--color-border-focus);
	border-radius: var(--radius-md);
	background: var(--color-surface-subtle);
}

.rg-cfg__resumo--sem {
	border-inline-start-color: var(--color-feedback-warning-base);
	background: var(--color-feedback-warning-bg);
}

.rg-cfg__valor {
	margin: 0;
	font-size: var(--font-size-heading-s);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	letter-spacing: var(--font-letter-spacing-tight);
	font-variant-numeric: tabular-nums;
}

.rg-cfg__detalhe {
	margin: var(--space-8) 0 0;
	font-size: var(--font-size-body-s);
	color: var(--color-text-secondary);
	font-variant-numeric: tabular-nums;
}

.rg-cfg__motivo {
	margin: var(--space-8) 0 0;
	font-size: var(--font-size-body-s);
	color: var(--color-feedback-warning-fg);
}

.rg-cfg__escala {
	margin: var(--space-12) 0 0;
	font-size: var(--font-size-body-s);
	color: var(--color-text-secondary);
}

.rg-cfg__escala strong {
	color: var(--color-text-primary);
	font-weight: var(--font-weight-medium);
}

/* ---- Arte ---- */

.rg-cfg__upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	min-height: 150px;
	padding: var(--space-24);
	border: var(--border-width-sm) dashed var(--color-border-default);
	border-radius: var(--radius-lg);
	background: var(--color-surface-base);
	text-align: center;
	cursor: pointer;
}

.rg-cfg__upload:focus-within {
	outline: var(--border-width-md) solid var(--color-border-focus);
	outline-offset: 2px;
}

.rg-cfg__upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.rg-cfg__upload-t {
	font-size: 15px;
	font-weight: var(--font-weight-medium);
}

.rg-cfg__upload-e {
	font-size: var(--font-size-caption);
	color: var(--color-text-secondary);
}

.rg-cfg__opcional {
	margin: 0;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.25px;
	color: var(--color-text-link);
}

.rg-cfg__aviso {
	margin: 0;
	font-size: var(--font-size-caption);
	color: var(--color-text-tertiary);
	line-height: var(--font-line-height-normal);
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
	.rg-cfg {
		--rg-cfg-ritmo: var(--space-32);
		--rg-cfg-legenda-gap: var(--space-16);
		--rg-cfg-op-gap: var(--space-16);
	}

	.rg-cfg__col-u,
	.rg-cfg__thead .rg-cfg__col-u {
		display: none;
	}

	.rg-cfg__op,
	.rg-cfg__grupo--largo .rg-cfg__op {
		/* Dois por linha: metade, menos metade do gap. Amarrado ao token
		   para nao desalinhar quando o espacamento mudar. */
		width: calc(50% - (var(--rg-cfg-op-gap) / 2));
	}
}

@media (max-width: 420px) {
	.rg-cfg__op,
	.rg-cfg__grupo--largo .rg-cfg__op {
		width: 100%;
	}
}


/* ==========================================================================
   FACTO  -  passo sem escolha

   Quando a tabela de precos da um valor unico ao produto, o passo mostra mas
   nao seleciona. Desenho a esquerda, nome e explicacao a direita.

   Medidas lidas da maquete (Agendas / Desktop): desenho 164x96, intervalo de
   20, texto alinhado ao centro vertical do desenho.
   ========================================================================== */

.rg-cfg__grupo--factos {
	border: 0;
	margin: 0;
	padding: 0;
}

.rg-cfg__facto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.rg-cfg__facto + .rg-cfg__facto {
	margin-block-start: var(--space-16);
}

/* O desenho nao encolhe: ou cabe aos 164, ou passa para cima do texto.
   Reduzir um desenho de 164x96 para metade apaga-lhe o traco; quebrar a
   linha nao custa nada num scroll vertical. */
.rg-cfg__facto-media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 164px;
	max-inline-size: 100%;
	block-size: 96px;
	background: var(--color-surface-subtle);
	overflow: hidden;
}

.rg-cfg__facto-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* O icone de reserva, quando o facto ainda nao tem desenho. */
.rg-cfg__facto-media svg:not(.dt) {
	width: 32px;
	height: 32px;
	color: var(--color-text-tertiary);
}

/* 280 e o ponto de quebra: abaixo de 164 + 20 + 280 de largura util o texto
   desce. Reage ao contentor e nao ao ecra, que e o que importa quando o
   mesmo facto aparece numa coluna de 916 e noutra mais estreita. */
.rg-cfg__facto-texto {
	flex: 1 1 280px;
	min-inline-size: 0;
}

.rg-cfg__facto-titulo {
	display: block;
	font-size: var(--font-size-body-m);
	font-weight: var(--font-weight-regular);
	line-height: var(--font-line-height-relaxed);
	color: var(--color-text-primary);
}

.rg-cfg__facto-spec {
	display: block;
	margin-block-start: var(--space-4);
	font-size: var(--font-size-body-s);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-tertiary);
}


/* ==========================================================================
   FICHA "A SUA ESCOLHA"   (Folhas de carta / Desktop, no 2421:5356)

   Cartao branco de 280, borda de 1 px subtle a toda a volta, sem raio, 24 de
   padding em cima e em baixo e 20 dos lados, com um ritmo unico entre todos
   os blocos.

   A maquete poe 18 px nesse ritmo e 0,25 px de tracking nos rotulos. A escala
   do DS nao tem nenhum dos dois - salta de 16 para 20, e o tracking wide e
   0,5. Fica o token, com o valor da maquete so como recurso: 2 px a mais por
   intervalo, que no ecra nao se ve, e zero valores presos ao ficheiro.

   A dois eixos faz-se com grid a partir dos 1024. Abaixo disso a ficha fica
   no fluxo, a seguir a quantidade - uma coluna de 280 num ecra estreito nao
   e uma ficha, e um aperto.
   ========================================================================== */

/* O embrulho assume o ritmo vertical que era do .rg-cfg, para a grelha de
   dois eixos nao ter de o reproduzir. Vale em todas as larguras. */
.rg-cfg__principal {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	min-inline-size: 0;
}

.rg-cfg__principal > .rg-cfg__grupo {
	margin-top: calc(var(--rg-cfg-ritmo) - var(--space-24));
}

@media (min-width: 1024px) {
	/* Duas celulas e so duas: o embrulho e a ficha. A versao anterior punha
	   todos os filhos na coluna 1 e mandava a ficha abarcar 100 linhas - o que
	   criava 92 linhas vazias, cada uma com o row-gap de 24, e 2 200 px de
	   branco por baixo do configurador. */
	.rg-cfg {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 280px;
		column-gap: var(--space-64);
		row-gap: 0;
		align-items: start;
	}

	.rg-cfg__resumo {
		position: sticky;
		top: var(--space-24);
		margin-top: 0;
	}
}

/* ---- a caixa ---- */

/* Classe repetida de proposito: o .rg-cfg__resumo--sem pinta o fundo de bege
   e poe uma barra ambar a esquerda para avisar que nao ha preco. Com a ficha
   montada esse aviso ja esta no numero (— , — €) e a maquete desenha o cartao
   sempre igual, por isso esta regra tem de ganhar a todos os modificadores -
   e duas classes iguais bastam para isso, sem precisar de !important. */
.rg-cfg__resumo--ficha.rg-cfg__resumo--ficha {
	background: var(--color-surface-raised);
	border: var(--border-width-sm) solid var(--color-border-subtle);
	border-radius: 0;
	padding: var(--space-24) var(--space-20);
}

.rg-cfg__ficha,
.rg-cfg__ficha-linhas,
.rg-cfg__ficha-producao,
.rg-cfg__ficha-prod {
	display: flex;
	flex-direction: column;
	gap: var(--space-18, var(--space-20));
}

/* ---- blocos ---- */

.rg-cfg__ficha-titulo {
	margin: 0;
	font-size: var(--font-size-heading-xxs);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-primary);
}

.rg-cfg__ficha-linha {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 2px);
}

.rg-cfg__ficha-rot {
	font-size: var(--font-size-caption);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-tertiary);
}

.rg-cfg__ficha-val {
	font-size: var(--font-size-body-s);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-primary);
}

/* .rg-cfg prefixado: o Elementor traz .elementor hr { margin: 0 }, que com
   dois seletores ganha a um seletor de classe unica. Aqui a margem e mesmo
   zero - o espaco vem do gap - mas a regra fica prefixada na mesma, para a
   borda nao depender de quem carrega primeiro. */
.rg-cfg .rg-cfg__ficha-divisor {
	border: 0;
	border-block-start: var(--border-width-sm) solid var(--color-border-subtle);
	margin: 0;
}

.rg-cfg__ficha-sub {
	margin: 0;
	font-size: var(--font-size-caption);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-tertiary);
}

/* A producao le-se a verde de marca: e o que a grafica vai fazer com a
   escolha, nao a escolha em si. A maquete separa os dois pela cor. */
.rg-cfg__ficha-producao .rg-cfg__ficha-sub,
.rg-cfg__ficha-prod .rg-cfg__ficha-rot,
.rg-cfg__ficha-prod .rg-cfg__ficha-val {
	color: var(--color-text-brand);
}

/* ---- estimativa ---- */

.rg-cfg__ficha-estimativa {
	display: flex;
	flex-direction: column;
	gap: var(--space-2, 2px);
}

.rg-cfg__ficha-estimativa .rg-cfg__valor {
	margin: 0;
	font-size: var(--font-size-heading-xs);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-tight, 1.3);
	color: var(--color-text-primary);
}

/* O detalhe, o motivo e a escala nao estao na maquete: o numero ja diz o que
   ha para dizer e o prazo de resposta esta na nota do topo da pagina. Ficam
   no DOM, fora do ecra, para o aria-live continuar a anunciar a mudanca a
   quem usa leitor de ecra. */
.rg-cfg__ficha-estimativa .rg-cfg__detalhe,
.rg-cfg__ficha-estimativa .rg-cfg__motivo,
.rg-cfg__ficha-estimativa .rg-cfg__escala {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- botao ---- */

.rg-cfg__ficha .rg-cfg__submeter {
	inline-size: 100%;
	justify-content: center;
}

.rg-cfg__ficha > p:has(> .rg-cfg__submeter) {
	margin: 0;
}


/* ==========================================================================
   SECCOES COM SUBTITULO, NOTA, E CARTAO FORA DE TABELA
   (Flyers / Desktop, no 2489:7444)
   ========================================================================== */

/* Um passo que junta mais do que um eixo. O ritmo entre subsecoes fica abaixo
   do ritmo entre passos, para as duas lerem como partes do mesmo passo. */
.rg-cfg__grupo--seccao {
	display: flex;
	flex-direction: column;
	gap: var(--rg-cfg-legenda-gap);
	width: 100%;
	min-width: 0;
}

.rg-cfg__grupo--seccao > .rg-cfg__legenda {
	margin: 0;
}

/* O <legend> de um fieldset aninhado continua a nao ser flex item, por isso a
   margem tem de vir daqui, como no .rg-cfg__legenda. */
.rg-cfg__subtitulo {
	font-family: var(--font-stack);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	line-height: var(--font-line-height-normal);
	letter-spacing: var(--font-letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin: 0 0 var(--space-12);
	padding: 0;
}

.rg-cfg__nota-seccao {
	margin: 0;
	font-size: var(--font-size-body-s);
	line-height: var(--font-line-height-normal);
	color: var(--color-text-secondary);
}

/* ---- cartao fora da tabela ativa ---- */

/* Diferente do .rg-cfg__op--sem: ali falta o preco de uma combinacao que
   existe, e o selo "sem preco" diz isso. Aqui a combinacao nao existe no
   formato escolhido - nao ha selo nenhum a por, so o cartao apagado, e o
   porque fica na nota da seccao. */
.rg-cfg__op--fora {
	border-style: dashed;
	background: var(--color-surface-subtle);
	cursor: default;
}

.rg-cfg__op--fora .rg-cfg__media {
	opacity: 0.4;
}

.rg-cfg__op--fora .rg-cfg__titulo,
.rg-cfg__op--fora .rg-cfg__spec {
	/* 3,8:1 contra o fundo claro: abaixo do AA para texto de leitura, mas isto
	   e estado desativado, que a WCAG 1.4.3 isenta. Continua legivel - a
	   alternativa, apagar mais, era esconder a informacao. */
	color: var(--color-text-tertiary);
}

.rg-cfg__op--fora:hover {
	border-color: var(--color-border-default);
}