/* ==========================================================================
   COOKIE BANNER (LGPD)
   Estilos do banner de consentimento de cookies + modal de personalizacao.
   Carregado pelo template part `template-parts/lgpd/cookie-banner.php` via
   enqueue do tema. Depende de: tokens.css (paleta, fontes, espacamentos,
   raios, transicoes). Nao usa pre-processador.

   Decisoes XP relevantes (Secao 7 do documento de solucao):
   - Banner herda paleta do tema atual (sem prefers-color-scheme proprio).
   - Contraste WCAG 2.1 AA garantido pelos tokens auditados em ciclo anterior.
   - Adaptacoes da DIV-T4-1 (botoes principais usam APENAS classes
     modificadoras --primary / --ghost, sem classe-base mb-cookie-banner__btn)
     e da DIV-T4-2 (classe mb-cookie-banner__close existe em 3 elementos --
     [X] do banner, [X] do modal e botao "Recusar tudo" -- entao o estilo do
     [X] precisa ser escopado para nao herdar no botao "Recusar tudo").
   ========================================================================== */

/* --------------------------------------------------------------------------
   A.7.1 Layout base do <aside> raiz
   Posicionamento fixo no rodape, com max-width centralizado em telas >=768px.
   pointer-events: none no <aside> para o overlay nao bloquear cliques fora
   do painel; o overlay e o painel reativam pointer-events: auto.
   -------------------------------------------------------------------------- */
.mb-cookie-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* z-index acima do header (z baixo) e abaixo de 9999 reservado para popups core do WP. */
	z-index: 9990;
	padding: 0;
	margin: 0;
	pointer-events: none;
	font-family: var(--sans);
}

.mb-cookie-banner[hidden] {
	display: none;
}

.mb-cookie-banner__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
	pointer-events: auto;
}

.mb-cookie-banner__panel,
.mb-cookie-banner__modal {
	position: relative;
	background: var(--bg-primary);
	color: var(--text-primary);
	border: 1px solid var(--border-primary);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	padding: var(--sp-6) var(--sp-5);
	pointer-events: auto;
	max-height: 80vh;
	overflow-y: auto;
}

.mb-cookie-banner__modal[hidden] {
	display: none;
}

@media (min-width: 768px) {
	.mb-cookie-banner__panel,
	.mb-cookie-banner__modal {
		max-width: 720px;
		margin: 0 auto;
		left: 50%;
		transform: translateX(-50%);
		border-radius: var(--radius-md);
	}

	.mb-cookie-banner {
		bottom: var(--sp-6);
	}
}

/* --------------------------------------------------------------------------
   A.7.2 Titulo, descricao, link
   Link sublinhado garante WCAG 1.4.1 (cor nao e o unico meio de identificar
   um link). text-underline-offset preserva legibilidade.
   -------------------------------------------------------------------------- */
.mb-cookie-banner__title {
	font-family: var(--sans);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	line-height: var(--leading-tight);
	margin: 0 0 var(--sp-3);
}

.mb-cookie-banner__desc {
	font-size: var(--text-base);
	color: var(--text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--sp-5);
}

.mb-cookie-banner__desc a {
	color: var(--accent);
	/* Sublinhado mitiga WCAG 1.4.1 (cor nao e unico meio de distinguir o link). */
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   A.7.3 Botoes (DIV-T4-1)
   No template part os botoes principais (Aceitar, Recusar, Salvar, Personalizar)
   usam APENAS as classes modificadoras (--primary ou --ghost) -- a classe-base
   `mb-cookie-banner__btn` foi removida para preservar a contagem do
   T-CKB-17 (substr_count na string base). Para garantir paridade visual
   (mesma altura, padding, font-size, border-radius) entre todos os modificadores,
   o seletor de atributo `[class*="mb-cookie-banner__btn--"]` aplica os estilos
   compartilhados a qualquer elemento cuja lista de classes contenha o prefixo
   do modificador. Em seguida, os modificadores especificos sobrepoem cor e
   borda.
   -------------------------------------------------------------------------- */
.mb-cookie-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

[class*="mb-cookie-banner__btn--"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sans);
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	padding: var(--sp-3) var(--sp-6);
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	transition: all 0.3s var(--ease-out);
}

.mb-cookie-banner__btn--primary {
	/* Cor de texto branco e justificada para consistencia com .btn--primary de components.css. */
	background: var(--accent);
	color: white;
}

.mb-cookie-banner__btn--primary:hover {
	background: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 30px var(--accent-glow);
}

.mb-cookie-banner__btn--ghost {
	background: transparent;
	color: var(--text-secondary);
	border: 1px solid var(--border-primary);
}

.mb-cookie-banner__btn--ghost:hover {
	border-color: var(--text-subtle);
	color: var(--text-primary);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Botao [X] (close) -- DIV-T4-2
   A classe `mb-cookie-banner__close` aparece em 3 elementos:
     1) [X] do painel principal -- filho direto de .mb-cookie-banner__panel.
     2) Botao "Recusar tudo" -- filho de .mb-cookie-banner__actions; tambem
        carrega .mb-cookie-banner__btn--primary, entao precisa preservar o
        visual de botao primario.
     3) [X] do modal -- filho direto de [data-mb-cookie-modal].
   O estilo de [X] (position absolute, sem fundo, fonte grande, cor neutra)
   so deve ser aplicado em (1) e (3). Por isso o seletor usa `:not()` para
   excluir qualquer elemento que tambem carregue uma classe com o prefixo
   `mb-cookie-banner__btn--`, isolando os botoes principais.
   -------------------------------------------------------------------------- */
.mb-cookie-banner__close:not([class*="mb-cookie-banner__btn--"]) {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	background: transparent;
	border: none;
	font-size: var(--text-2xl);
	color: var(--text-muted);
	cursor: pointer;
	padding: var(--sp-1) var(--sp-2);
	line-height: 1;
}

.mb-cookie-banner__close:not([class*="mb-cookie-banner__btn--"]):hover {
	color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   A.7.4 Categorias do modal
   Cada fieldset empilhado verticalmente com label/checkbox alinhados e
   descricao em fonte menor logo abaixo.
   -------------------------------------------------------------------------- */
.mb-cookie-banner__category {
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	padding: var(--sp-4);
	margin: 0 0 var(--sp-3);
}

.mb-cookie-banner__category > label {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	cursor: pointer;
}

.mb-cookie-banner__category > label > input[type="checkbox"]:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.mb-cookie-banner__category-desc {
	font-size: var(--text-sm);
	color: var(--text-muted);
	line-height: var(--leading-normal);
	margin: var(--sp-2) 0 0;
}

/* --------------------------------------------------------------------------
   A.7.7 Status (aria-live)
   Reserva uma altura minima para evitar reflow no momento em que o JS injeta
   o texto de feedback (ex.: "Sua escolha foi registrada"). Quando vazio,
   colapsa via :empty para nao gerar espaco em branco redundante.
   -------------------------------------------------------------------------- */
.mb-cookie-banner__status {
	font-family: var(--mono);
	font-size: var(--text-sm);
	color: var(--text-muted);
	margin-top: var(--sp-3);
	/* min-height reserva espaco para evitar reflow ao anunciar o status. */
	min-height: 1.5em;
}

.mb-cookie-banner__status:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   A.7.6 Focus visible
   Outline visivel em todos os elementos focaveis dentro do banner -- requisito
   WCAG 2.4.7. O `accent-subtle` em background reforca o foco para usuarios
   com baixa visao.
   -------------------------------------------------------------------------- */
[class*="mb-cookie-banner__btn--"]:focus-visible,
.mb-cookie-banner__close:focus-visible,
.mb-cookie-banner__category input[type="checkbox"]:focus-visible,
.mb-cookie-banner__desc a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	background: var(--accent-subtle);
}

/* --------------------------------------------------------------------------
   A.7.5 prefers-reduced-motion
   Usuarios que sinalizam preferencia por movimento reduzido (configuracao do
   sistema operacional) nao recebem transicoes nem hovers com transform.
   Requisito WCAG 2.3.3.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mb-cookie-banner,
	.mb-cookie-banner__panel,
	.mb-cookie-banner__modal,
	[class*="mb-cookie-banner__btn--"],
	.mb-cookie-banner__close {
		transition: none !important;
		animation: none !important;
	}

	[class*="mb-cookie-banner__btn--"]:hover {
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   A.7.8 Notas finais
   - Tokens canonicos confirmados em tokens.css: --bg-primary, --text-primary,
     --accent, --sans, etc (DIV-MS-1-T6 ratificou nomes sem prefixo
     --mb-color-).
   - Pares de contraste a validar manualmente no checklist pre-go-live (Apendice
     B do principal): texto branco sobre var(--accent) em ambos os temas
     (dark/light) e link sobre var(--bg-primary).
   - Teste manual recomendado no DevTools: ativar prefers-reduced-motion=reduce
     em "Rendering" e confirmar zero animacao no banner.
   -------------------------------------------------------------------------- */