/* ------------------------------------------------------------
 * Naga Store - o aviso de cookie
 * ------------------------------------------------------------
 * Quem desenha essa barra e o Blocksy, e ele a entregava branca,
 * colada no rodape, atravessada por cima do botao do WhatsApp.
 * Era a unica peca clara do site inteiro: primeira coisa que o
 * cliente via ao abrir qualquer pagina.
 *
 * Aqui ela vira um cartao da casa e sai da frente do WhatsApp:
 * no celular sobe acima dele, no computador encosta na esquerda.
 * Some para sempre no primeiro clique, entao nao precisa de
 * animacao nenhuma.
 *
 * Este arquivo mora sozinho porque a barra aparece em toda
 * pagina, e a home nao carrega o moldura.css, onde estas linhas
 * estavam antes. Na home a barra continuava branca.
 *
 * O seletor carrega o [data-type] de proposito. O Blocksy escreve
 * as regras dele com essa marca junto, e sem ela as minhas linhas
 * perdiam caladas: a barra continuava branca e colada no rodape.
 *
 * A cor nao e forcada no braco. A barra le o fundo dela de uma
 * variavel do tema, entao eu troco o valor da variavel aqui
 * dentro. Vale so para esta barra e nao vaza pro resto do site.
 * Cada var tem o valor cru atras dela: se um dia esta folha
 * entrar numa pagina sem a paleta da casa, a barra ainda nasce
 * escura em vez de nascer transparente.
 * ------------------------------------------------------------ */

body .cookie-notification[data-type] {
	--theme-palette-color-8: var(--naga-preto-2, #111114);
	--notice-background-color: var(--naga-preto-2, #111114);
	--theme-text-color: var(--naga-texto-2, #a7a5a1);
	left: 12px;
	right: 12px;
	bottom: 96px;
	width: auto;
	max-width: 460px;
	padding: 0;
	border: 1px solid var(--naga-linha-2, rgba(255, 255, 255, .15));
	border-radius: var(--naga-raio, 14px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}

/* No celular ela e uma faixa deitada, nao um cartao: texto de um lado,
 * os dois botoes do outro. Empilhada ela media 138px de altura e comia
 * duas linhas da tabela de pacotes; deitada fica na casa dos 70px, e
 * some para sempre no primeiro clique. */
body .cookie-notification[data-type] .container {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	/* o .container do Blocksy nasce estreito e centralizado no meio da
	 * barra: sobravam 46px vazios de cada lado, e a frase caia em cinco
	 * linhas de tres palavras. Aqui ele ocupa a barra inteira. */
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 14px;
	background: none;
}

body .cookie-notification[data-type] .ct-cookies-content {
	flex: 1 1 auto;
	margin: 0;
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 11.5px;
	line-height: 1.4;
	text-align: left;
	color: var(--naga-texto-2, #a7a5a1);
}

body .cookie-notification[data-type] .ct-button-group {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	margin: 0;
}

body .cookie-notification[data-type] .ct-button {
	flex: 0 0 auto;
	/* 34px e o minimo que ainda da alvo de dedo confortavel nesta faixa */
	min-height: 34px;
	padding: 0 13px;
	border: 1px solid transparent;
	border-radius: 9px;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

body .cookie-notification[data-type] .ct-cookies-accept-button {
	background: var(--naga-ouro-claro, #e3c464);
	color: var(--naga-preto, #0b0b0d);
}

body .cookie-notification[data-type] .ct-cookies-accept-button:hover {
	background: var(--naga-texto, #f2f1ef);
}

body .cookie-notification[data-type] .ct-cookies-decline-button {
	border-color: var(--naga-linha-2, rgba(255, 255, 255, .15));
	background: none;
	color: var(--naga-texto-2, #a7a5a1);
}

body .cookie-notification[data-type] .ct-cookies-decline-button:hover {
	border-color: var(--naga-texto-3, #767471);
	color: var(--naga-texto, #f2f1ef);
}

@media (min-width: 768px) {

	body .cookie-notification[data-type] {
		left: 24px;
		right: auto;
		bottom: 24px;
	}

	/* No computador sobra espaco: a faixa volta ao tamanho de leitura. */
	body .cookie-notification[data-type] .container {
		gap: 16px;
		padding: 16px 20px;
	}

	body .cookie-notification[data-type] .ct-cookies-content {
		font-size: 13.5px;
		line-height: 1.55;
	}

	body .cookie-notification[data-type] .ct-button {
		min-height: 42px;
		padding: 0 18px;
		border-radius: 10px;
		font-size: 14px;
	}
}