/**
 * Баннер согласия на файлы cookie.
 *
 * Цвета из токенов темы. Переменные с запасным значением: модуль обязан
 * выглядеть прилично и при другой теме, где токенов проекта нет.
 *
 * Полоса прижата к низу окна: она перекрывает подвал, но не двигает
 * страницу. Появления с анимацией нет намеренно — баннер показывается
 * сразу после разбора страницы, и подъезжающая панель выглядела бы
 * как рекламная всплывашка.
 *
 * z-index 1000 — выше всего, что есть в теме (максимум 40, мобильное
 * меню): вопрос о согласии не должен оказаться под чужим слоем.
 */

.nn-consent {
	position: fixed;
	z-index: 1000;
	right: 0;
	bottom: 0;
	left: 0;
	max-height: 85vh;
	overflow-y: auto;
	border-top: 1px solid var(--nn-color-border-strong, #4f5366);
	background-color: var(--nn-color-surface, #242633);
	box-shadow: var(--nn-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.45));
	color: var(--nn-color-text, #cfd8dd);
	font-family: var(--nn-font-body, inherit);
	font-size: var(--nn-fs-card, 0.9rem);
	line-height: var(--nn-lh-base, 1.5);
}

.nn-consent[hidden] {
	display: none;
}

.nn-consent__inner {
	max-width: var(--nn-container-max, 1140px);
	margin: 0 auto;
	padding: var(--nn-space-4, 1rem) var(--nn-container-pad, 20px);
}

.nn-consent__title {
	margin: 0 0 var(--nn-space-2, 0.5rem);
	font-family: var(--nn-font-heading, inherit);
	font-size: var(--nn-fs-md, 1.125rem);
	font-weight: var(--nn-fw-bold, 700);
	line-height: var(--nn-lh-h3, 1.4);
}

.nn-consent__text,
.nn-consent__note {
	margin: 0 0 var(--nn-space-2, 0.5rem);
}

.nn-consent__note {
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-xs, 0.8rem);
}

.nn-consent__link {
	color: var(--nn-color-accent, #04e2ff);
}

.nn-consent__link:hover,
.nn-consent__link:focus-visible {
	color: var(--nn-color-accent-hover, #6beeff);
}

/* ---------------------------------------------------------------
 * Окно «Настроить»
 * --------------------------------------------------------------- */

.nn-consent__prefs {
	display: grid;
	gap: var(--nn-space-3, 0.75rem);
	margin: var(--nn-space-4, 1rem) 0;
	padding: var(--nn-space-3, 0.75rem);
	border: 1px solid var(--nn-color-border, #3a3d4d);
	border-radius: var(--nn-radius-md, 9px);
	background-color: var(--nn-color-surface-2, #22242f);
}

.nn-consent__prefs[hidden] {
	display: none;
}

.nn-consent__cat-head {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	cursor: pointer;
	font-weight: var(--nn-fw-bold, 700);
}

/* 20px — площадь касания у переключателя и так мала, меньше нельзя. */
.nn-consent__cat-input {
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var(--nn-color-action, #2e89ff);
	cursor: pointer;
}

.nn-consent__cat-input[disabled] {
	cursor: default;
	opacity: 0.6;
}

.nn-consent__cat-badge {
	padding: 2px var(--nn-space-2, 0.5rem);
	border-radius: var(--nn-radius-pill, 999px);
	background-color: var(--nn-color-border, #3a3d4d);
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-xs, 0.8rem);
	font-weight: var(--nn-fw-normal, 400);
}

.nn-consent__cat-text {
	margin: var(--nn-space-1, 0.25rem) 0 0 calc(20px + var(--nn-space-2, 0.5rem));
	color: var(--nn-color-text-muted, #85a1bb);
	font-size: var(--nn-fs-xs, 0.8rem);
}

/* ---------------------------------------------------------------
 * Кнопки
 *
 * Свои, а не `.nn-btn` темы: модуль не должен разваливаться там,
 * где темы проекта нет. Размеры и цвета — те же токены, поэтому
 * рядом с кнопками сайта они выглядят одинаково.
 * --------------------------------------------------------------- */

.nn-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nn-space-2, 0.5rem);
}

.nn-consent__btn {
	min-height: 40px;
	padding: var(--nn-space-2, 0.5rem) var(--nn-space-4, 1rem);
	border: 1px solid var(--nn-color-border-strong, #4f5366);
	border-radius: var(--nn-radius-md, 9px);
	background-color: transparent;
	color: var(--nn-color-text, #cfd8dd);
	cursor: pointer;
	font-family: var(--nn-font-ui, inherit);
	font-size: var(--nn-fs-card, 0.9rem);
	font-weight: var(--nn-fw-bold, 700);
}

.nn-consent__btn[hidden] {
	display: none;
}

.nn-consent__btn:hover {
	border-color: var(--nn-color-accent, #04e2ff);
	color: var(--nn-color-accent, #04e2ff);
}

.nn-consent__btn--primary {
	border-color: var(--nn-color-action, #2e89ff);
	background-color: var(--nn-color-action, #2e89ff);
	color: var(--nn-color-action-text, #f8fafc);
}

.nn-consent__btn--primary:hover {
	border-color: var(--nn-color-action-hover, #57a3ff);
	background-color: var(--nn-color-action-hover, #57a3ff);
	color: var(--nn-color-action-text, #f8fafc);
}

.nn-consent__btn--ghost {
	border-color: transparent;
	color: var(--nn-color-text-muted, #85a1bb);
	text-decoration: underline;
}

.nn-consent :focus-visible {
	outline: 2px solid var(--nn-color-focus, #ffd54f);
	outline-offset: 2px;
}

/* Сам баннер получает фокус программно — рамка вокруг всей полосы
   выглядела бы ошибкой вёрстки. */
.nn-consent:focus,
.nn-consent:focus-visible {
	outline: none;
}

/* ---------------------------------------------------------------
 * Узкий экран
 *
 * Значение брейкпоинта — из токенов темы (`--nn-bp-tablet`, 600px).
 * В медиазапросе переменная не работает, поэтому число повторено
 * здесь, как это сделано в стилях темы.
 * --------------------------------------------------------------- */

@media (max-width: 599px) {

	.nn-consent__actions {
		flex-direction: column;
	}

	.nn-consent__btn {
		width: 100%;
	}
}