/*
 * Musin Bros Cookie Consent
 *
 * Простой cookie-баннер в нижней части экрана.
 * Он не является модальным окном и не блокирует работу со страницей.
 */

.mb-cookie-consent {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 999990;

	width: min(760px, calc(100% - 32px));

	transform: translateX(-50%);

	background: #ffffff;
	border: 1px solid #e2e5e9;
	border-radius: 12px;

	box-shadow:
		0 8px 30px rgb(0 0 0 / 10%);

	box-sizing: border-box;

	opacity: 1;

	transition:
		opacity 0.18s ease,
		transform 0.18s ease;
}


/*
 * Состояние при закрытии баннера.
 * JS добавляет этот класс после выбора пользователя.
 */
.mb-cookie-consent.is-hiding {
	opacity: 0;
	transform: translate(-50%, 8px);
	pointer-events: none;
}


/*
 * Внутренняя раскладка:
 * слева текст, справа две кнопки.
 */
.mb-cookie-consent__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;

	padding: 18px 20px;
}


/*
 * Текстовая часть.
 */
.mb-cookie-consent__content {
	min-width: 0;
}


.mb-cookie-consent__title {
	margin: 0 0 5px;

	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;

	color: #222222;
}


.mb-cookie-consent__text {
	font-size: 14px;
	line-height: 1.55;

	color: #575760;
}


.mb-cookie-consent__text a {
	color: var(--accent, #1e73be);
	text-decoration: underline;
	text-underline-offset: 2px;
}


.mb-cookie-consent__text a:hover,
.mb-cookie-consent__text a:focus {
	color: #222222;
}


/*
 * Контейнер кнопок.
 */
.mb-cookie-consent__actions {
	display: flex;
	align-items: center;
	gap: 8px;

	flex-shrink: 0;
}


/*
 * Общий внешний вид кнопок.
 *
 * Все важные свойства задаём здесь,
 * чтобы глобальные стили кнопок темы не меняли вид баннера.
 */
.mb-cookie-consent__button {
	appearance: none;

	margin: 0;
	padding: 10px 14px;

	border: 1px solid transparent;
	border-radius: 7px;

	font: inherit;
	font-size: 14px;
	line-height: 1.25;
	font-weight: 500;

	cursor: pointer;

	white-space: nowrap;

	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}


/*
 * Основная кнопка.
 */
.mb-cookie-consent__button--primary {
	background: var(--accent, #1e73be);
	border-color: var(--accent, #1e73be);
	color: #ffffff;
}


.mb-cookie-consent__button--primary:hover,
.mb-cookie-consent__button--primary:focus {
	background: #155f9d;
	border-color: #155f9d;
	color: #ffffff;
}


/*
 * Вторичная кнопка.
 */
.mb-cookie-consent__button--secondary {
	background: #ffffff;
	border-color: #cfd4da;
	color: #333333;
}


.mb-cookie-consent__button--secondary:hover,
.mb-cookie-consent__button--secondary:focus {
	background: #f3f5f7;
	border-color: #b9c0c8;
	color: #222222;
}


/*
 * Планшеты и мобильные устройства.
 *
 * Перестраиваем баннер в одну колонку,
 * чтобы текст и кнопки не становились слишком тесными.
 */
@media (max-width: 700px) {

	.mb-cookie-consent {
		bottom: 12px;
		width: calc(100% - 24px);
		border-radius: 10px;
	}

	.mb-cookie-consent__inner {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 16px;
	}

	.mb-cookie-consent__actions {
		width: 100%;
	}

	.mb-cookie-consent__button {
		flex: 1 1 0;
		white-space: normal;
	}

}


/*
 * На очень узких экранах кнопки ставим друг под другом.
 */
@media (max-width: 420px) {

	.mb-cookie-consent__actions {
		flex-direction: column;
	}

	.mb-cookie-consent__button {
		width: 100%;
	}

}


/*
 * Учитываем настройку ОС "уменьшить движение".
 */
@media (prefers-reduced-motion: reduce) {

	.mb-cookie-consent {
		transition: none;
	}

}