/* Cookie notice.
   A fixed pill above the page: white 16% over a heavy backdrop blur, so it
   reads against whatever it happens to sit on. It ships hidden and
   static/js/cookies.js reveals it. */

.cookies {
	position: fixed;
	left: max(12px, 20rem);
	right: max(12px, 20rem);
	bottom: max(40px, 40rem);
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(12px, 16rem);
	padding: max(14px, 14rem) max(20px, 28rem);
	color: #00;
	background: #fff;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	border-radius: 999px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.6s var(--ease);
	box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 11%);
}
.cookies-vis {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.cookies-icon,
.cookies-close {
	flex: none;
	display: block;
	width: max(16px, 20rem);
	height: max(16px, 20rem);
	color: #000000;
}
.cookies-close .icon {
	display: block;
	width: 100%;
	height: 100%;
}
.cookies-close {
	cursor: pointer;
	transition: opacity 0.4s var(--ease);
}
.cookies-close:hover {
	opacity: 0.6;
}
.cookies-text {
	font-size: var(--text_S);
	line-height: 120%;
	letter-spacing: -0.02em;
}
.cookies-text a {
	color: var(--white);
	text-decoration: underline;
}
.cookies-text a:hover {
	text-decoration: none;
}

@media screen and (max-width: 1024px) {
	.cookies {
		left: 12px;
		right: 12px;
		bottom: 12px;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 12px;
		padding: 20px;
		border-radius: 20px;
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		background: white;
		color: #000;
		/* border: 1px solid #00000000; */
		box-shadow: 5px 5px 15px 5px rgb(0 0 0 / 11%);
	}
	.cookies-close {
		margin-left: auto;
	}
	.cookies-text {
		order: 1;
		width: 100%;
	}
}