:root {
	--banner-width: 620px;
	--banner-ratio: 2160 / 260; /* временно, скрипт подставит точные пропорции картинки */
}

/* Баннер показываем только внутри аккаунта (страницы с левым меню) */
.gc-main-content:not(.with-left-menu) .top-notification-wrapper {
	display: none;
}

.common-banner-wrapper.hide_banners {
	display: none !important;
}

/* Скрываем рекламный баннер GetOverflow на всех устройствах */
.gl-ad-banner,
.gl-ad-close {
	display: none !important;
}

/* ===================== ПОЗИЦИЯ ===================== */
.info-wrapper .common-banner-wrapper,
.common-banner-wrapper {
	position: fixed !important;
	left: 90px !important;
	bottom: 16px !important;
	z-index: 999 !important;
	display: flex !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

/* ===================== САМ БАННЕР ===================== */
.common-banner {
	position: relative !important;
	display: block !important;
	box-sizing: border-box !important;
	width: var(--banner-width) !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: var(--banner-ratio) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	background-color: #2b0e15 !important;
	background-image: url("https://fs.getcourse.ru/fileservice/file/download/a/616242/sc/34/h/52e22e3ab426a6f7a14d623a62189016.png") !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	box-shadow: 0 10px 30px -10px rgba(29, 8, 13, 0.55) !important;
	transition: transform .2s ease, box-shadow .2s ease;
}

.common-banner:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px -10px rgba(29, 8, 13, 0.65) !important;
}

/* Растягиваем ссылку на всю картинку, текст прячем */
.common-banner .banner-wrapper-content,
.common-banner .banner-content,
.common-banner .banner-title {
	position: static !important;
	margin: 0 !important;
	padding: 0 !important;
	width: auto !important;
}

.common-banner .banner-content a,
.common-banner .banner-title a {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	padding: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

/* Всё лишнее скрываем: текст и кнопка уже есть на картинке */
.common-banner .banner-text,
.common-banner .banner-link,
.common-banner .banner-logo,
.common-banner a.mobile,
.common-banner__note {
	display: none !important;
}

/* ===================== КРЕСТИК ЗАКРЫТИЯ ===================== */
.common-banner .banner-close {
	position: absolute !important;
	top: 4px !important;
	right: 4px !important;
	z-index: 2 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	background: rgba(29, 8, 13, 0.6) !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.common-banner .banner-close:hover {
	background: rgba(29, 8, 13, 0.85) !important;
}

/* ===================== ПЛАНШЕТЫ ===================== */
@media (max-width: 900px) {
	.common-banner-wrapper {
		left: 12px !important;
		right: 12px !important;
		bottom: 12px !important;
	}
	.common-banner {
		width: min(var(--banner-width), calc(100vw - 24px)) !important;
	}
}

/* ===================== ТЕЛЕФОНЫ ===================== */
@media (max-width: 720px) {
	.common-banner-wrapper {
		left: 8px !important;
		right: 8px !important;
		bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
		justify-content: center !important;
	}
	.common-banner {
		width: calc(100vw - 16px) !important;
		border-radius: 8px !important;
	}
	.common-banner .banner-close {
		top: 3px !important;
		right: 3px !important;
		width: 20px !important;
		height: 20px !important;
		font-size: 14px !important;
	}
}