/**
 * Подвал. Макет: Figma 60:2086 / 60:2112 (desktop 1441).
 *
 * Координаты макета (канвас 1440):
 *   фон        1440x520 y=7413, #1a1a1a, скругление сверху 10
 *   логотип    x=80 y=7437
 *   описание   x=80 y=7501  Inter 16 белый
 *   колонки    x=80/410/740/1070, заголовки y=7588 Bebas 24 жёлтый
 *   пункты     шаг 32, Benzin 12 белый
 *   cookie     920x92 x=260 y=7823
 */

.sm-footer {
	margin-top: 76px;
	padding: 48px 0 40px;
	color: var(--sm-white);
	background: var(--sm-ink);
	border-radius: 10px 10px 0 0;
}

.sm-footer__logo svg {
	width: 220px;
	max-width: 100%;
	height: auto;
}

/* Логотип в подвале тёмный по исходнику — осветляем под тёмный фон. */
.sm-footer__logo svg path {
	fill: var(--sm-white);
}

/* Первая колонка: логотип, под ним соцсети. */
.sm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.sm-footer__socials {
	display: flex;
	gap: 9px;
	align-items: center;
}

.sm-footer__socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 39px;
	height: 39px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.sm-footer__socials a:hover {
	background: rgba(255, 255, 255, 0.2);
}

.sm-footer__socials svg {
	width: 22px;
	height: 22px;
}

/*
 * Тот же случай, что и в шапке (см. header.css, KOY-1583): самолётик
 * Telegram занимает свой viewBox целиком, без полей, и в коробке 22px
 * его заливка была 18.8px против 15.9px у MAX. При 18.5px рисунки
 * сравниваются по высоте, а translateY компенсирует пустую полосу
 * снизу viewBox — иначе самолётик стоит выше соседей.
 */
.sm-footer__socials .sm-footer__social--social-tg svg {
	width: 18.5px;
	height: auto;
	transform: translateY(6%);
}

/* Ссылки на политики под соцсетями. */
.sm-footer__policies {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sm-footer__policies a {
	font-size: 10px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sm-footer__policies a:hover {
	color: var(--sm-white);
}

/* --- колонки --- */

.sm-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(4, 1fr);
	gap: 40px 30px;
}

.sm-footer__col-title {
	font-family: var(--sm-font-accent);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sm-yellow);
}

.sm-footer__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 14px;
}

.sm-footer__list li,
.sm-footer__list a {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sm-white);
}

.sm-footer__list a {
	transition: color 0.2s ease;
}

.sm-footer__list a:hover {
	color: var(--sm-yellow);
}

/* --- cookie --- */

.sm-footer__cookie {
	display: flex;
	gap: 30px;
	align-items: center;
	justify-content: space-between;
	max-width: 920px;
	margin: 46px auto 0;
	padding: 26px 27px;
	background: var(--sm-white);
	border-radius: 12px;
}

.sm-footer__cookie[hidden] {
	display: none;
}

.sm-footer__cookie-text {
	max-width: 600px;
	font-family: 'Inter', var(--sm-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--sm-ink);
}

.sm-footer__cookie-btn {
	flex-shrink: 0;
	min-width: 186px;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.sm-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}

	.sm-footer__brand {
		grid-column: 1 / -1;
	}

	.sm-footer__cookie {
		flex-direction: column;
		align-items: flex-start;
	}
}