/*
 * Ravolli — Aparência do banner de consentimento v1.1.0
 * Camada: apresentação (child theme). CANÔNICO. Sem !important, sem hex novo:
 * só tokens do theme.json (--wp--preset--*). Dourado não é usado (falha contraste).
 * Enfileirado só quando o Complianz está ativo e o assistente dele foi concluído
 * (inc/ravolli-consent.php). Estilos do plugin: Complianz 7.5.5, módulos de
 * cookiebanner/css/ (o plugin gera um arquivo único em uploads a partir deles).
 *
 * COMO VENCER O PLUGIN SEM !important
 * O CSS do plugin usa seletores de até 6 classes e o nosso arquivo pode vir antes
 * ou depois dele (se o plugin injeta o <link> por JS, vem depois). Por isso cada
 * seletor aqui tem MAIS especificidade que a regra equivalente do plugin, em vez
 * de depender da ordem:
 *   .cmplz-cookiebanner[id]       raiz do banner (0,2,0)
 *   .cmplz-cookiebanner[id][class] raiz, onde o plugin usa 2 classes (módulos de
 *                                  posição/animação: "slide" fixa `bottom`)
 * O que NÃO fazemos de propósito:
 *   - Não mexemos em `display` do banner, dos botões nem do "×": quem mostra/esconde
 *     é o plugin (.cmplz-hidden, .cmplz-dismissed, display inline do "Salvar",
 *     opção "esconder fechar" do painel). Só três exceções, de propósito: logo
 *     (some), título (o plugin o esconde até 425px; aqui ele fica) e divisores
 *     (escondidos em todas as larguras; o vidro não precisa de filete).
 *   - Não estilizamos o interruptor (slider) das categorias: cores pelo painel.
 *
 * LAYOUT (recomendado no painel: posição "inferior esquerdo", categorias
 * "ver preferências", animação "nenhuma", sem botão de fechar, sem botão flutuante
 * "gerenciar consentimento"):
 *   até 768px  cartão flutuante com folga nas bordas, três botões numa linha.
 *   769px+     faixa centralizada de até 960px, texto à esquerda e botões ao lado,
 *              na mesma linha, à direita.
 *   Vidro: painel translúcido com desfoque, mesmo desenho do menu "A Ravolli"
 *   (style.css) e de .ravolli-glass-card (ravolli-home-reviews.css).
 *
 * CONVIVÊNCIA (z-index): WhatsApp (Click to Chat) 99999999 por padrão, com posição
 * inline (não dá para mover sem !important) → o banner fica ACIMA dele (100000000)
 * e cobre o botão enquanto está aberto; no desktop a faixa é larga e centralizada, então o vídeo sobe para qualquer lado.
 * Vídeo flutuante (100) sobe sozinho: o JS publica a altura do banner em
 * --ravolli-consent-h e marca <html class="ravolli-consent-open"> (ravolli-consent.js).
 * No celular o fim da página ganha a mesma folga, para o botão de comprar e o
 * resumo do checkout não ficarem escondidos atrás da faixa.
 *
 * LIMITE CONHECIDO: celular deitado (altura <= 400px) usa o modo compacto do
 * próprio plugin, com !important e `zoom`; não é vencido sem !important.
 */

/* ---------- Raiz ---------- */

.cmplz-cookiebanner[id][class] {
	--ravolli-consent-x: var(--wp--preset--spacing--md);
	--ravolli-consent-radius: var(--theme-button-border-radius, 3px);

	/* Vidro: mesmos valores de --rg-panel / --rg-edge / --rg-edge-top / --rg-blur (style.css, ravolli-home-reviews.css).
	   Pior caso (62% branco sobre preto = #9e9e9e): o texto do corpo (#606060) daria só 2,35:1, por isso
	   mensagem e links usam brand-primary (#060e1e, 7,4:1). */
	--ravolli-consent-panel: rgba(255, 255, 255, .62);
	--ravolli-consent-edge: rgba(255, 255, 255, .6);
	--ravolli-consent-edge-top: rgba(255, 255, 255, .95);
	--ravolli-consent-blur: 12px;

	z-index: 100000000;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr);
	grid-gap: var(--wp--preset--spacing--xs);
	max-width: 100%;
	padding: var(--wp--preset--spacing--sm) var(--ravolli-consent-x);
	border: 1px solid var(--ravolli-consent-edge);
	border-top-color: var(--ravolli-consent-edge-top);
	border-radius: var(--ravolli-consent-radius);
	background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 40%), var(--ravolli-consent-panel);
	-webkit-backdrop-filter: blur(var(--ravolli-consent-blur)) saturate(140%);
	backdrop-filter: blur(var(--ravolli-consent-blur)) saturate(140%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 32px rgba(6, 14, 30, .10);
	color: var(--wp--preset--color--text-body);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
}

/* Sem backdrop-filter: painel sólido da paleta (igual ao menu "A Ravolli"). */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cmplz-cookiebanner[id][class] {
		background: var(--wp--preset--color--bg-base);
	}
}

/* Quem pede menos transparência: sólido, sem desfoque. */
@media (prefers-reduced-transparency: reduce) {
	.cmplz-cookiebanner[id][class] {
		background: var(--wp--preset--color--bg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* O plugin põe `grid-column: span 3` em cada bloco; com uma coluna só, ocupar a linha toda. */
.cmplz-cookiebanner[id] > :is(.cmplz-header, .cmplz-divider, .cmplz-body, .cmplz-links, .cmplz-buttons, .cmplz-documents) {
	grid-column: 1 / -1;
}

/* ---------- Cabeçalho ---------- */

.cmplz-cookiebanner[id] .cmplz-header {
	grid-template-columns: minmax(0, 1fr) auto;
}

/* Sem logo (a faixa precisa ser compacta). Também some do fluxo da grade. */
.cmplz-cookiebanner[id] .cmplz-header .cmplz-logo {
	display: none;
}

/* O plugin esconde o título até 425px; aqui ele fica (é o "valor" da mensagem). */
.cmplz-cookiebanner[id] .cmplz-header .cmplz-title {
	display: block;
	grid-column: 1;
	justify-self: start;
	margin: 0;
	color: var(--wp--preset--color--brand-primary);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-style: italic;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
}

/* Botão "×" (se for deixado ligado no painel): alvo de 44px sem engordar a faixa. */
.cmplz-cookiebanner[id] .cmplz-header .cmplz-close {
	grid-column: 2;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	margin: -10px -12px;
	padding: 12px; /* ícone de 20px do plugin + 12 + 12 = 44. Sem `display`: o plugin o esconde pelo painel. */
	line-height: 0;
	color: var(--wp--preset--color--brand-primary);
}

.cmplz-cookiebanner[id] .cmplz-header .cmplz-close:hover {
	font-size: inherit;
	line-height: inherit;
}

/* Sem as linhas de divisão, em qualquer largura. */
.cmplz-cookiebanner[id] .cmplz-divider {
	display: none;
}

/* ---------- Texto ---------- */

.cmplz-cookiebanner[id] .cmplz-body {
	min-width: 0;
}

.cmplz-cookiebanner[id] .cmplz-message {
	margin: 0;
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* O <p> dentro da mensagem herda ~21px de margem; era ela que abria a folga antes dos botões. */
.cmplz-cookiebanner[id] .cmplz-message p {
	margin: 0;
}

.cmplz-cookiebanner[id] .cmplz-message a {
	color: var(--wp--preset--color--brand-primary);
}

/* Link "Política de Privacidade": fica abaixo dos botões, na ordem do HTML (a ordem do Tab = a ordem visual). */
.cmplz-cookiebanner[id] .cmplz-links.cmplz-documents,
.cmplz-cookiebanner[id] .cmplz-links ul {
	justify-content: flex-start;
}

.cmplz-cookiebanner[id] .cmplz-links .cmplz-link {
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--xs);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Botões: os três com o mesmo tamanho, contraste e peso ---------- */

.cmplz-cookiebanner[id] .cmplz-buttons {
	flex-direction: row;
	gap: var(--wp--preset--spacing--xs);
}

.cmplz-cookiebanner[id] .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences) {
	flex: 1 1 0;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	min-height: 40px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--xs);
	border: 1px solid var(--wp--preset--color--brand-primary);
	border-radius: var(--ravolli-consent-radius);
	background: transparent;
	color: var(--wp--preset--color--brand-primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease;
}

.cmplz-cookiebanner[id] .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences):hover {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--bg-base);
}

/* ---------- Foco visível ---------- */

.cmplz-cookiebanner[id] :is(button, a, input, [tabindex="0"]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-primary);
	outline-offset: 2px;
}

/* Interruptor: o foco do plugin é um anel azul fixo no ::before do rótulo. */
.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before {
	box-shadow: 0 0 0 2px var(--wp--preset--color--bg-base), 0 0 0 4px var(--wp--preset--color--brand-primary);
}

/* ---------- Categorias (painel aberto por "Preferências") ---------- */

.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category {
	border-radius: var(--ravolli-consent-radius);
	background-color: var(--wp--preset--color--surface-alt);
}

.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* "Sempre ativo": o plugin pinta de verde fixo. */
.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: var(--wp--preset--color--text-body);
}

.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-description {
	color: var(--wp--preset--color--brand-primary);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/* Alvos de toque: aumenta a área clicável sem mexer no desenho do interruptor nem da setinha. */
.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox {
	left: -10px;
	width: 48px;
	height: 44px;
	margin-top: -22px;
}

.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
	position: relative;
}

.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle::after {
	content: "";
	position: absolute;
	inset: -14px -8px;
}

/* ---------- Celular e tablet em pé: cartão flutuante ---------- */

@media (max-width: 768px) {
	.cmplz-cookiebanner[id][class] {
		top: auto;
		right: var(--wp--preset--spacing--xs);
		bottom: calc(var(--wp--preset--spacing--xs) + env(safe-area-inset-bottom, 0px));
		left: var(--wp--preset--spacing--xs);
		width: auto;
		min-width: 0;
		max-height: 85vh;
		max-height: 85dvh;
		padding: var(--wp--preset--spacing--sm);
		border-width: 1px;
		border-radius: var(--wp--preset--spacing--md);
		transform: none;
	}

	.cmplz-cookiebanner[id] .cmplz-body {
		max-height: 55vh;
	}

	/* Folga no fim da página enquanto o cartão está aberto (altura + distância do rodapé). */
	html.ravolli-consent-open body {
		padding-bottom: calc(var(--ravolli-consent-h, 0px) + var(--wp--preset--spacing--xs));
	}

	/* O vídeo flutuante sobe para ficar acima do cartão (qualquer canto). */
	html.ravolli-consent-open .ravolli-fv[data-position] {
		--rfv-lift: calc(var(--ravolli-consent-h, 0px) + var(--wp--preset--spacing--xs));
	}
}

/* ---------- Desktop: faixa flutuante centralizada ---------- */

@media (min-width: 769px) {
	.cmplz-cookiebanner[id][class] {
		top: auto;
		right: 0;
		bottom: var(--wp--preset--spacing--lg);
		left: 0;
		width: min(960px, calc(100vw - 2 * var(--wp--preset--spacing--lg)));
		min-width: 0;
		margin-inline: auto;
		padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--lg);
		row-gap: 4px;
		align-items: center;
		border-width: 1px;
		border-radius: var(--wp--preset--spacing--md);
		transform: none;
	}

	/* Texto na coluna 1; botões na coluna 2, centrados na altura dos três blocos.
	   Substitui, só aqui, o `grid-column: 1 / -1` da regra de base. */
	.cmplz-cookiebanner[id][class] > .cmplz-header {
		grid-column: 1;
		grid-row: 1;
	}

	.cmplz-cookiebanner[id][class] > .cmplz-body {
		grid-column: 1;
		grid-row: 2;
		overflow-y: auto;
		max-height: 50vh;
	}

	.cmplz-cookiebanner[id][class] > .cmplz-documents {
		grid-column: 1;
		grid-row: 3;
	}

	.cmplz-cookiebanner[id][class] > .cmplz-buttons {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.cmplz-cookiebanner[id] .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences) {
		flex: 0 0 auto;
		min-width: 120px;
		padding: 0 var(--wp--preset--spacing--md);
	}

	.cmplz-cookiebanner[id] .cmplz-message,
	.cmplz-cookiebanner[id] .cmplz-categories {
		width: auto;
	}

	.cmplz-cookiebanner[id] .cmplz-message {
		font-size: var(--wp--preset--font-size--sm);
		line-height: 1.45;
	}

	/* A faixa é larga e centralizada: pode cobrir o vídeo em qualquer lado. */
	html.ravolli-consent-open .ravolli-fv[data-position] {
		--rfv-lift: calc(var(--ravolli-consent-h, 0px) + var(--wp--preset--spacing--xs));
	}
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	.cmplz-cookiebanner[id][class],
	.cmplz-cookiebanner[id] div {
		animation: none;
	}

	.cmplz-cookiebanner[id] .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences),
	.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::before,
	.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label::after,
	.cmplz-cookiebanner[id] .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
		transition: none;
	}

	.cmplz-cookiebanner[id] .cmplz-categories.cmplz-fade-in {
		animation: none;
	}
}