/**
 * Aviso de cookies.
 *
 * Um cartão preso à base da tela, que não cobre a página nem bloqueia a
 * compra: quem chega para enviar uma homenagem não pode encontrar uma parede
 * antes da coroa. Consentimento também precisa ser livre — aviso que impede de
 * usar o site até aceitar não é escolha (Guia de cookies da ANPD).
 *
 * Os dois botões são iguais de propósito. Ver consentimento.php.
 */

.jf-cookies {
	position: fixed;
	z-index: 9000; /* abaixo da gaveta do carrinho (9999) e do aviso dela */
	left: var(--jf-space-sm);
	right: var(--jf-space-sm);
	bottom: var(--jf-space-sm);
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.jf-cookies[hidden] {
	display: none;
}

/* No desktop, à esquerda: centralizado, o cartão cobria o botão de pausa do
   carrossel de banners, que fica no canto inferior direito. */
@media (min-width: 60em) {
	.jf-cookies {
		justify-content: flex-start;
		left: var(--jf-space-md);
	}

	.jf-cookies__caixa {
		max-width: 40rem;
	}
}

.jf-cookies__caixa {
	width: 100%;
	max-width: 48rem;
	padding: var(--jf-pad-md);
	background-color: var(--jf-color-surface);
	color: var(--jf-color-text);
	border: 1px solid var(--jf-color-border);
	border-radius: var(--jf-radius-lg);
	box-shadow: var(--jf-shadow-lg);
	pointer-events: auto;
}

.jf-cookies__titulo {
	margin: 0 0 var(--jf-space-3xs);
	font-family: var(--jf-font-heading);
	font-size: var(--jf-size-base);
	font-weight: var(--jf-weight-semibold);
	line-height: var(--jf-leading-snug);
}

.jf-cookies__texto {
	max-width: none;
	margin: 0 0 var(--jf-space-sm);
	font-size: var(--jf-size-sm);
	line-height: var(--jf-leading-normal);
}

.jf-cookies__texto a {
	color: var(--jf-color-primary);
	font-weight: var(--jf-weight-semibold);
}

.jf-cookies__acoes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--jf-space-2xs);
}

@media (min-width: 40em) {
	.jf-cookies__acoes {
		display: flex;
		justify-content: flex-end;
	}
}

.jf-cookies__botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--jf-tap-min);
	padding: var(--jf-space-2xs) var(--jf-space-md);
	background-color: var(--jf-color-surface);
	color: var(--jf-color-primary);
	font-family: var(--jf-font-body);
	font-size: var(--jf-size-sm);
	font-weight: var(--jf-weight-semibold);
	border: 1px solid var(--jf-color-primary);
	border-radius: var(--jf-radius-md);
	cursor: pointer;
	transition: background-color var(--jf-transition), color var(--jf-transition);
}

.jf-cookies__botao:hover {
	background-color: var(--jf-color-primary);
	color: var(--jf-color-text-on-dark);
}

/* Botão do rodapé que reabre o aviso: parece link, é botão. */
.jf-cookies-preferencias {
	display: inline;
	min-height: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	border: 0;
	cursor: pointer;
}

.jf-cookies-preferencias:hover {
	background: none;
	color: inherit;
	text-decoration-thickness: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.jf-cookies:not([hidden]) .jf-cookies__caixa {
		animation: jf-cookies-entra var(--jf-duration-slow) var(--jf-ease) both;
	}
}

@keyframes jf-cookies-entra {
	from { opacity: 0; transform: translateY(var(--jf-rise)); }
	to   { opacity: 1; transform: none; }
}