/* ============================================================
   УНИВЕРСАЛЬНЫЙ CSS ДЛЯ БАННЕРОВ ГЕТКУРСА (.common-banner)
   ============================================================
   Как использовать для нового баннера:
   1) Меняете только переменные в :root ниже — картинку, цвета,
      пропорции. Остальной код трогать не нужно.
   2) Если баннер должен "плавать" поверх страницы (как виджет
      в углу экрана) — добавьте классу-обёртке
      .common-banner-wrapper модификатор .floating
      (см. блок в самом низу файла, по умолчанию выключен).
   ============================================================ */

:root{
  --banner-bg-image: url('https://fs.getcourse.ru/fileservice/file/download/a/33847/sc/150/h/55d36d3ae9991c72770fdb630ac54a09.jpg');
  --banner-aspect: 4 / 1;         /* пропорции баннера; под свою картинку можно смотреть на её реальное wxh */
  --banner-max-width: 1200px;
  --banner-radius: 20px;

  --banner-ink: #4A443B;          /* основной текст */
  --banner-accent: #9CA184;       /* акцентное слово в тексте */
  --banner-btn-bg: #686051;       /* цвет кнопки/крестика */
  --banner-btn-radius: 11px;

  --banner-font-head: 'Unbounded', sans-serif;
  --banner-font-body: 'Inter', sans-serif;
}

/* ============================================================
   ОГРАНИЧЕНИЕ ПОКАЗА: только внутри платформы обучения
   (там, где есть левое меню — .with-left-menu). На публичных
   страницах и в виджетах баннер показываться не будет.
   ============================================================ */
.gc-main-content:not(.with-left-menu) .top-notification-wrapper {
  display: none !important;
}

.common-banner,
.common-banner *{
  box-sizing: border-box !important;
}

.common-banner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: var(--banner-max-width) !important;
  aspect-ratio: var(--banner-aspect) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 2px 24px 2px 56px !important;
  border-radius: var(--banner-radius) !important;
  overflow: visible !important;
  background: var(--banner-bg-image) center center / cover no-repeat !important;
  color: var(--banner-ink) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.common-banner:focus,
.common-banner:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

.common-banner .banner-wrapper-content {
  display: flex !important;
  align-items: flex-start !important;
}

/* --- заголовок / основной текст --- */
.common-banner .banner-content,
.common-banner .banner-title {
  font-family: var(--banner-font-head) !important;
  font-weight: 800 !important;
  color: var(--banner-ink) !important;
  line-height: 1.25 !important;
}
.common-banner .banner-title span {
  border: 1px solid var(--banner-btn-bg) !important;
  border-radius: 6px !important;
  padding: 0.5px 4px !important;
}

/* --- вторичный текст --- */
.common-banner .banner-text {
  font-family: var(--banner-font-body) !important;
  color: var(--banner-ink) !important;
  font-weight: 400 !important;
}
.common-banner .banner-text span,
.common-banner .colortext {
  font-weight: 700 !important;
  color: var(--banner-accent) !important;
}

/* акцент внутри заголовка/текста, если выделен <b>/<strong>/.accent */
.common-banner .banner-content strong,
.common-banner .banner-content b,
.common-banner .banner-content .accent {
  color: var(--banner-accent) !important;
}

/* --- кнопка --- */
.common-banner .banner-link {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, calc(-50% + 50px)) !important;
  display: inline-block !important;
  width: 220px !important;
  padding: 14px 20px !important;
  text-align: center !important;
  color: #fff !important;
  background: var(--banner-btn-bg) !important;
  font-family: var(--banner-font-body) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
  line-height: 1.3 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: var(--banner-btn-radius) !important;
  transition: filter .2s ease, transform .15s ease;
}
.common-banner .banner-link:focus {
  outline: none !important;
  box-shadow: none !important;
}
.common-banner .banner-link:hover {
  filter: brightness(1.08);
  transform: translate(-50%, calc(-50% + 50px - 1px));
}

/* --- крестик закрытия (оба подтверждённых класса) --- */
.common-banner .banner-close,
.common-banner .close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 4px !important;
  width: auto !important;
  height: auto !important;
  color: var(--banner-btn-bg) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* --- логотип/аватар в баннере (если используется отдельно от фона) --- */
.common-banner .banner-logo {
  width: 120px !important;
  height: 120px !important;
  margin-top: 0 !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.common-banner__note {
  color: var(--banner-ink) !important;
  opacity: 0.8 !important;
  font-size: 11px !important;
}

.common-banner a {
  color: #fff !important;
}

/* ============================================================
   ПЛАВАЮЩИЙ БАННЕР — виджет в левом нижнем углу экрана
   ============================================================ */
.common-banner-wrapper {
  position: fixed !important;
  left: 140px !important;
  bottom: 10px !important;
  z-index: 999 !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: auto !important;
}
.common-banner-wrapper .common-banner {
  max-width: 570px !important;
  width: 570px !important;
  aspect-ratio: var(--banner-aspect) !important;
  padding: 2px 16px 2px 24px !important;
}
.common-banner-wrapper .common-banner .banner-link {
  width: 150px !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  transform: translate(-50%, calc(-50% + 20px)) !important;
}
.common-banner-wrapper .common-banner .banner-link:hover {
  transform: translate(-50%, calc(-50% + 20px - 1px)) !important;
}
.common-banner-wrapper .common-banner .banner-close,
.common-banner-wrapper .common-banner .close-btn {
  font-size: 16px !important;
  top: 8px !important;
  right: 8px !important;
}
.common-banner-wrapper.hide_banners {
  display: none !important;
}

@media (max-width: 560px) {
  .common-banner-wrapper {
    left: 12px !important;
    right: auto !important;
    bottom: 70px !important;
    width: auto !important;
  }
  .common-banner-wrapper .common-banner {
    width: 260px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 2px 10px 2px 14px !important;
  }
  .common-banner-wrapper .common-banner .banner-link {
    width: 49px !important;
    font-size: 6px !important;
    padding: 4px 3px !important;
    border-radius: 6px !important;
    transform: translate(-50%, calc(-50% + 12px)) !important;
  }
  .common-banner-wrapper .common-banner .banner-link:hover {
    transform: translate(-50%, calc(-50% + 12px - 1px)) !important;
  }
  .common-banner-wrapper .common-banner .banner-close,
  .common-banner-wrapper .common-banner .close-btn {
    font-size: 13px !important;
    top: 5px !important;
    right: 5px !important;
  }
}