/* =============================================================================
   BANNER DE COOKIES — FASE B [v2.5.65]
   =============================================================================

   PORQUE É QUE ESTE FICHEIRO EXISTE SEPARADO:
   O banner aparece em TODAS as páginas do site, incluindo as que não têm
   loja nenhuma (a página inicial, os artigos, os contactos). Se o metesse
   no shop-style.css, obrigava a carregar o CSS todo da loja em páginas que
   não precisam dele. Aqui é um ficheiro pequeno e independente.

   TUDO USA OS TOKENS (tokens.css). Não há uma única cor escrita à mão neste
   ficheiro — se um dia mudares o castanho da marca, o banner acompanha.

   NOTA SOBRE O !important:
   Tal como no botão do WhatsApp, o Elementor tem estilos globais para
   <button> que carregam DEPOIS do nosso CSS e ganhavam a batalha (foi o que
   fez o botão do WhatsApp aparecer roxo e quadrado). Nos botões do banner
   usa-se a mesma defesa, e só nas propriedades visuais que já se sabe
   serem atacadas.
   ============================================================================= */


/* =============================================================================
   1. A CAIXA
   ============================================================================= */

/*
 * Começa escondida SEMPRE, mesmo para quem nunca respondeu.
 * É o JavaScript que a mostra, e a razão é a cache do LiteSpeed:
 * a página guardada em cache é a mesma para toda a gente, por isso a
 * decisão "mostrar ou não" não pode estar dentro do HTML — tem de ser
 * tomada no browser de cada visitante, lendo o cookie dele.
 * Se isto começasse visível, haveria um instante em que o banner
 * "pisca" a quem já respondeu. Assim nunca acontece.
 */
.scs-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999999; /* acima do botão do WhatsApp (999998) — é temporário e tem de ser visto */
	display: none;
	box-sizing: border-box;
	padding: var(--scs-space-4);
	font-family: var(--scs-font-body);
	color: var(--scs-text);

	/* Não escurece nem bloqueia o site: o visitante pode continuar a
	   navegar e a comprar. Foi uma decisão deliberada — um painel que
	   obriga a decidir dá mais aceitações, mas custa vendas. */
	pointer-events: none; /* o espaço à volta da caixa continua clicável */
}

.scs-consent.is-visivel {
	display: block;
}

.scs-consent__caixa {
	pointer-events: auto; /* a caixa em si, essa, recebe cliques */
	box-sizing: border-box;
	max-width: 1080px;
	margin: 0 auto;
	background: var(--scs-card);
	border: 1px solid var(--scs-border);
	border-radius: var(--scs-radius-lg);
	box-shadow: var(--scs-shadow-lg);
	padding: var(--scs-space-6);
}

/*
 * A entrada. Sobe suavemente em vez de aparecer de repente.
 * prefers-reduced-motion: há pessoas que configuram o sistema para
 * reduzir animações (por enjoo ou por sensibilidade). Respeitar isso é
 * acessibilidade básica, e o WordPress recomenda-o.
 */
@media (prefers-reduced-motion: no-preference) {
	.scs-consent.is-visivel .scs-consent__caixa {
		animation: scs-consent-subir 260ms ease-out;
	}
}

@keyframes scs-consent-subir {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   2. O TOPO — texto à esquerda, botões à direita (em ecrã largo)
   ============================================================================= */

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

.scs-consent__texto {
	flex: 1 1 auto;
	min-width: 0; /* sem isto, textos longos empurram os botões para fora da caixa */
}

.scs-consent__titulo {
	display: block;
	font-family: var(--scs-font-heading);
	font-size: 1.15rem;
	line-height: 1.3;
	color: var(--scs-text);
	margin: 0 0 var(--scs-space-2);
}

.scs-consent__desc {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--scs-muted);
}

/*
 * O LINK DA POLÍTICA [v2.5.68]
 * Estava dentro do parágrafo, a seguir ao ponto final, e desaparecia no
 * meio do texto. É o link que a lei obriga a ter bem à vista, por isso
 * passou a linha própria, com peso de letra e sublinhado mais firmes.
 */
.scs-consent__politica {
	display: inline-block;
	margin-top: var(--scs-space-3);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--scs-dark) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.scs-consent__politica:hover,
.scs-consent__politica:focus-visible {
	color: var(--scs-accent) !important;
}


/* =============================================================================
   3. OS BOTÕES
   =============================================================================
   A LEI, e não o gosto: "Rejeitar tudo" tem de ser tão fácil de encontrar e
   de carregar como "Aceitar tudo". Por isso os dois são botões do mesmo
   tamanho, lado a lado, com o mesmo peso de letra. Um banner onde recusar
   dá mais trabalho do que aceitar já foi multado várias vezes na Europa.
   O "Aceitar tudo" é escuro só por ser a ação mais comum — a diferença é de
   cor, não de dificuldade.
   ============================================================================= */

.scs-consent__acoes {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--scs-space-2);
}

.scs-consent__btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	cursor: pointer;
	font-family: var(--scs-font-body) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none !important;
	padding: 12px 20px !important;
	border-radius: var(--scs-radius-sm) !important;
	border: 1px solid transparent !important;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

/* Aceitar — o castanho da marca */
.scs-consent__btn--principal {
	background: var(--scs-dark) !important;
	color: #fff !important;
}

.scs-consent__btn--principal:hover,
.scs-consent__btn--principal:focus-visible {
	background: var(--scs-dark-hover) !important;
	color: #fff !important;
}

/* Rejeitar — mesmo tamanho, contorno em vez de preenchimento */
.scs-consent__btn--secundario {
	background: transparent !important;
	color: var(--scs-dark) !important;
	border-color: var(--scs-border-strong) !important;
}

.scs-consent__btn--secundario:hover,
.scs-consent__btn--secundario:focus-visible {
	background: var(--scs-soft-bg) !important;
	border-color: var(--scs-dark) !important;
	color: var(--scs-dark) !important;
}

/* Personalizar — discreto, é a opção menos usada */
.scs-consent__btn--ligacao {
	background: transparent !important;
	color: var(--scs-muted) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	padding: 12px 8px !important;
}

.scs-consent__btn--ligacao:hover,
.scs-consent__btn--ligacao:focus-visible {
	color: var(--scs-dark) !important;
}

/* Contorno de foco visível — para quem navega pelo teclado */
.scs-consent__btn:focus-visible,
.scs-consent__interruptor input:focus-visible + .scs-consent__calha {
	outline: 2px solid var(--scs-accent);
	outline-offset: 2px;
}


/* =============================================================================
   4. O PAINEL DE CATEGORIAS
   ============================================================================= */

.scs-consent__painel {
	display: none;
	margin-top: var(--scs-space-6);
	padding-top: var(--scs-space-6);
	border-top: 1px solid var(--scs-border);
}

.scs-consent__painel.is-aberto {
	display: block;
}

.scs-consent__categoria {
	display: flex;
	align-items: flex-start;
	gap: var(--scs-space-4);
	padding: var(--scs-space-4) 0;
	border-bottom: 1px solid var(--scs-border);
}

.scs-consent__categoria:last-of-type {
	border-bottom: 0;
}

.scs-consent__cat-texto {
	flex: 1 1 auto;
	min-width: 0;
}

.scs-consent__cat-nome {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--scs-text);
	margin-bottom: 2px;
}

.scs-consent__cat-desc {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.5;
	color: var(--scs-muted);
}

.scs-consent__fixo {
	flex: 0 0 auto;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--scs-muted);
	background: var(--scs-soft-bg-deep);
	border-radius: var(--scs-radius-full);
	padding: 6px 14px;
	white-space: nowrap;
}

.scs-consent__painel-acoes {
	display: flex;
	justify-content: flex-end;
	margin-top: var(--scs-space-5);
}


/* =============================================================================
   5. O INTERRUPTOR (liga/desliga)
   =============================================================================
   É uma checkbox verdadeira, escondida por cima do desenho. Isso é
   deliberado: assim continua a funcionar com o teclado, com leitores de
   ecrã e com o preenchimento automático, coisa que um <div> pintado a
   parecer um interruptor nunca faria.
   ============================================================================= */

.scs-consent__interruptor {
	flex: 0 0 auto;
	position: relative;
	display: inline-block;
	width: 46px;
	height: 26px;
	margin-top: 2px;
}

.scs-consent__interruptor input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}

.scs-consent__calha {
	position: absolute;
	inset: 0;
	background: var(--scs-border-strong);
	border-radius: var(--scs-radius-full);
	transition: background-color 180ms ease;
	pointer-events: none;
}

.scs-consent__calha::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: var(--scs-shadow-sm);
	transition: transform 180ms ease;
}

.scs-consent__interruptor input:checked + .scs-consent__calha {
	background: var(--scs-dark);
}

.scs-consent__interruptor input:checked + .scs-consent__calha::before {
	transform: translateX(20px);
}


/* =============================================================================
   6. O BOTÃO DE REABRIR
   =============================================================================
   Fica em BAIXO-ESQUERDA, o canto oposto ao do WhatsApp (baixo-direita),
   exatamente como fazia o ícone do CookieYes. Nunca se cruzam.
   Só aparece DEPOIS de o visitante ter respondido — antes disso o banner
   já está lá, e dois elementos a pedir a mesma coisa seria confuso.
   ============================================================================= */

.scs-consent-reabrir {
	-webkit-appearance: none;
	appearance: none;
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 999997; /* abaixo do WhatsApp e do banner: é o menos importante dos três */
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px !important;
	height: 42px !important;
	padding: 0 !important;
	cursor: pointer;
	background: var(--scs-card) !important;
	color: var(--scs-dark) !important;
	border: 1px solid var(--scs-border-strong) !important;
	border-radius: 50% !important;
	box-shadow: var(--scs-shadow) !important;
	opacity: 0.75;
	transition: opacity 160ms ease, transform 160ms ease;
}

.scs-consent-reabrir.is-visivel {
	display: inline-flex;
}

.scs-consent-reabrir:hover,
.scs-consent-reabrir:focus-visible {
	opacity: 1;
	transform: translateY(-2px);
}

.scs-consent-reabrir svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* A versão em texto, para quem preferir pôr um link no rodapé pelo shortcode */
.scs-consent-link {
	-webkit-appearance: none;
	appearance: none;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0;
	cursor: pointer;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.scs-consent-link:hover {
	color: var(--scs-accent) !important;
}


/* =============================================================================
   7. NÃO TAPAR O BOTÃO DO WHATSAPP — SÓ QUANDO ELE É MESMO TAPADO
   =============================================================================
   A caixa do banner tem no máximo 1080px e fica CENTRADA. Num ecrã largo,
   sobra espaço de cada lado e o botão do WhatsApp (canto inferior direito)
   nunca chega a ser tapado — não há motivo nenhum para o mexer.

   ERRO CORRIGIDO EM [v2.5.66]: na versão anterior a subida aplicava-se em
   TODOS os tamanhos de ecrã. Em desktop o botão saltava sem razão, porque
   se assumiu que a caixa ocupava a largura toda. Não ocupa.

   A CONTA: 1080px da caixa + 16px de margem de cada lado = 1112px. Abaixo
   de 1250px a caixa já está perto o suficiente do canto direito para o
   tapar. Acima disso, fica quieto.
   ============================================================================= */

@media (max-width: 1250px) {
	.scs-whatsapp-widget {
		transition: bottom 200ms ease;
	}

	html.scs-consent-aberto .scs-whatsapp-widget {
		bottom: calc(15px + var(--scs-consent-altura, 0px));
	}
}


/* =============================================================================
   8. ECRÃS PEQUENOS
   =============================================================================
   Três degraus, para cobrir portátil / tablet / telemóvel:

   - até 900px (tablet deitado e portáteis pequenos): os botões passam
     para baixo do texto, porque lado a lado ficavam demasiado apertados.
   - até 560px (telemóvel): cada botão ocupa a largura toda. É a regra
     do "alvo de toque": um botão estreito num ecrã pequeno erra-se com
     o polegar, e errar aqui significa aceitar sem querer.
   - altura reduzida (telemóvel deitado): a caixa ganha barra de
     deslocamento própria, senão o painel de categorias aberto não cabe
     e os botões de guardar ficam inalcançáveis.
   ============================================================================= */

@media (max-width: 900px) {
	.scs-consent__principal {
		display: block;
	}

	.scs-consent__acoes {
		margin-top: var(--scs-space-5);
		flex-wrap: wrap;
	}

	.scs-consent__btn--principal,
	.scs-consent__btn--secundario {
		flex: 1 1 auto;
	}
}

@media (max-width: 560px) {
	.scs-consent {
		padding: var(--scs-space-2);
	}

	.scs-consent__caixa {
		padding: var(--scs-space-5) var(--scs-space-4);
		border-radius: var(--scs-radius);
	}

	.scs-consent__acoes {
		display: block;
	}

	.scs-consent__btn {
		width: 100%;
		margin-bottom: var(--scs-space-2);
	}

	.scs-consent__btn:last-child {
		margin-bottom: 0;
	}

	.scs-consent__painel-acoes .scs-consent__btn {
		margin-bottom: 0;
	}

	/* A categoria passa a duas linhas: texto em cima, interruptor em baixo
	   à direita — senão o texto fica espremido numa coluna de 40% */
	.scs-consent__categoria {
		flex-wrap: wrap;
	}

	.scs-consent__cat-texto {
		flex: 1 1 100%;
		order: 1;
	}

	.scs-consent__interruptor,
	.scs-consent__fixo {
		order: 2;
		margin-top: var(--scs-space-3);
		margin-left: auto;
	}

	.scs-consent-reabrir {
		bottom: 12px;
		left: 12px;
		width: 38px !important;
		height: 38px !important;
	}
}

@media (max-height: 520px) {
	.scs-consent__caixa {
		max-height: 88vh;
		overflow-y: auto;
	}
}