/* =========================================================
   ВСПЛЫВАЮЩИЙ БАННЕР
   Финальная версия под GetCourse
   Разметка:
   img.banner-logo
   .banner-wrapper-content
   .banner-content
   .banner-title
   .banner-text
   .banner-link
   .banner-close
   ========================================================= */

:root {
  --summer-dark: #102c53;
  --summer-pink: #fc79af;
  --summer-pink-soft: #ff9ac6;
  --summer-pink-light: #ffe0f2;
  --summer-blue: #68a8f8;
  --summer-blue-light: #c2ddfb;
  --summer-white: #ffffff;

  --summer-shadow-pink: rgba(252, 121, 175, 0.28);
  --summer-shadow-blue: rgba(104, 168, 248, 0.2);
  --summer-shadow-dark: rgba(16, 44, 83, 0.16);
}

/* ВАЖНО:
   Не добавляем правило
   .gc-main-content:not(.with-left-menu) .top-notification-wrapper { display:none; }
   Оно могло скрывать баннер на десктопе.
*/

.top-notification-wrapper {
  position: static !important;
  display: block !important;
}

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

.info-wrapper .common-banner-wrapper {
  position: relative !important;
}

/* Позиция баннера */
.common-banner-wrapper {
  position: fixed !important;
  left: 24px !important;
  bottom: 20px !important;
  z-index: 99999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  font-family: "proxima-nova", "Lato", Helvetica, Arial, sans-serif !important;

  animation: summerBannerIn 0.42s ease both !important;
}

/* Основной баннер */
.common-banner {
  position: relative !important;
  isolation: isolate !important;

  display: grid !important;
  grid-template-columns: 76px 1fr 28px !important;
  align-items: center !important;
  column-gap: 10px !important;

  width: 680px !important;
  min-height: 84px !important;
  max-height: none !important;

  padding: 6px 12px 6px 8px !important;
  border-radius: 24px !important;

  background:
    radial-gradient(circle at 80% 14%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 25%),
    radial-gradient(circle at 94% 100%, rgba(104, 168, 248, 0.4) 0%, rgba(104, 168, 248, 0) 34%),
    linear-gradient(105deg, #fff2fa 0%, #ffd2e7 28%, #ff9ecb 58%, #c8e1ff 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.74) !important;

  box-shadow:
    0 16px 34px var(--summer-shadow-pink),
    0 6px 18px var(--summer-shadow-blue),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

  overflow: hidden !important;
}

/* Мягкий блик без символов */
.common-banner::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;

  right: 78px !important;
  top: -58px !important;

  width: 154px !important;
  height: 154px !important;
  border-radius: 50% !important;

  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.36) 0%,
    rgba(255, 255, 255, 0.15) 44%,
    rgba(255, 255, 255, 0) 72%
  ) !important;

  pointer-events: none !important;
}

/* Полностью отключаем псевдоэлемент с символами */
.common-banner::after {
  content: none !important;
  display: none !important;
}

/* Иконка. В твоей разметке .banner-logo — это сама картинка */
.common-banner .banner-logo {
  display: block !important;

  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;

  margin: 0 !important;

  border-radius: 50% !important;
  object-fit: cover !important;

  background: var(--summer-white) !important;
  border: 4px solid rgba(255, 255, 255, 0.98) !important;

  box-shadow:
    0 9px 20px var(--summer-shadow-dark),
    0 0 0 1px rgba(252, 121, 175, 0.12) !important;
}

/* Обертка текста и кнопки */
.common-banner .banner-wrapper-content {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 126px !important;
  align-items: center !important;
  column-gap: 6px !important;

  width: 100% !important;
  margin: 0 !important;
}

/* Текстовый блок */
.common-banner .banner-content {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  color: var(--summer-dark) !important;
}

/* Заголовок */
.common-banner .banner-title {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;

  font-size: 18px !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;

  color: var(--summer-dark) !important;
  text-transform: uppercase !important;
}

.common-banner .banner-title a {
  color: var(--summer-dark) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
}

.common-banner .banner-title span {
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Основной текст */
.common-banner .banner-text {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;

  color: var(--summer-dark) !important;
}

.common-banner .banner-text a {
  color: var(--summer-dark) !important;
  text-decoration: none !important;
}

.common-banner .banner-text strong {
  color: var(--summer-dark) !important;
  font-weight: 700 !important;
}

/* Подчеркнутый кликабельный фрагмент */
.common-banner .banner-text u {
  display: inline !important;

  color: var(--summer-dark) !important;

  font-weight: 700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1.4px !important;
  text-underline-offset: 3px !important;
}

/* Кнопка */
.common-banner .banner-link {
  position: relative !important;
  z-index: 3 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 126px !important;
  min-width: 126px !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.98) !important;

  color: var(--summer-dark) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-align: center !important;

  box-shadow:
    0 10px 22px rgba(16, 44, 83, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;
}

.common-banner .banner-link:hover {
  transform: translateY(-1px) !important;
  background: #ffffff !important;

  box-shadow:
    0 14px 26px rgba(16, 44, 83, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Крестик */
.common-banner .banner-close {
  position: relative !important;
  z-index: 4 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 28px !important;
  height: 28px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 50% !important;

  color: rgba(255, 255, 255, 0.98) !important;
  text-decoration: none !important;

  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 700 !important;

  cursor: pointer !important;

  transition:
    background 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease !important;
}

.common-banner .banner-close:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  transform: scale(1.04) !important;
}

.common-banner a {
  cursor: pointer !important;
}

.common-banner a.mobile,
.common-banner__note {
  display: none !important;
}

.mobile-show {
  display: none !important;
}

/* Анимация появления */
@keyframes summerBannerIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Планшеты */
@media (max-width: 900px) {
  .common-banner-wrapper {
    left: 12px !important;
    right: 12px !important;
    bottom: 58px !important;
    justify-content: center !important;
  }

  .common-banner {
    width: 100% !important;
    max-width: 700px !important;
  }
}

/* Мобильная версия */
@media (max-width: 560px) {
  .common-banner-wrapper {
    left: 10px !important;
    right: 10px !important;
    bottom: 74px !important;
  }

  .common-banner {
    width: 100% !important;
    min-height: 96px !important;

    grid-template-columns: 68px 1fr 24px !important;
    column-gap: 8px !important;

    padding: 8px 9px 8px 7px !important;
    border-radius: 22px !important;

    background:
      radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 24%),
      linear-gradient(105deg, #fff2fa 0%, #ffd0e6 34%, #ff9ac6 68%, #c2ddfb 125%) !important;
  }

  .common-banner::before,
  .common-banner::after {
    display: none !important;
    content: none !important;
  }

  .common-banner .banner-logo {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    border-width: 3px !important;
  }

  .common-banner .banner-wrapper-content {
    grid-template-columns: minmax(0, 1fr) 94px !important;
    column-gap: 6px !important;
  }

  .common-banner .banner-title {
    font-size: 15px !important;
    line-height: 1.02 !important;
    margin-bottom: 4px !important;
    font-weight: 800 !important;
  }

  .common-banner .banner-title a {
    font-weight: 800 !important;
  }

  .common-banner .banner-text {
    font-size: 12.2px !important;
    line-height: 1.13 !important;
    font-weight: 600 !important;
  }

  .common-banner .banner-text strong {
    font-weight: 700 !important;
  }

  .common-banner .banner-text u {
    font-weight: 700 !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
  }

  .mobile-show {
    display: block !important;
  }

  .common-banner .banner-link {
    width: 94px !important;
    min-width: 94px !important;
    height: 38px !important;
    padding: 0 9px !important;

    font-size: 13px !important;
    font-weight: 800 !important;
  }

  .common-banner .banner-close {
    width: 22px !important;
    height: 22px !important;

    font-size: 22px !important;
    font-weight: 700 !important;
  }
}

/* Очень узкие телефоны */
@media (max-width: 380px) {
  .common-banner-wrapper {
    left: 8px !important;
    right: 8px !important;
  }

  .common-banner {
    min-height: 92px !important;

    grid-template-columns: 60px 1fr 22px !important;
    column-gap: 7px !important;

    padding: 8px 8px 8px 7px !important;
  }

  .common-banner .banner-logo {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  .common-banner .banner-wrapper-content {
    grid-template-columns: minmax(0, 1fr) 84px !important;
    column-gap: 5px !important;
  }

  .common-banner .banner-title {
    font-size: 13.5px !important;
  }

  .common-banner .banner-text {
    font-size: 11.2px !important;
  }

  .common-banner .banner-link {
    width: 84px !important;
    min-width: 84px !important;
    height: 36px !important;

    padding: 0 7px !important;

    font-size: 12px !important;
  }

  .common-banner .banner-close {
    width: 20px !important;
    height: 20px !important;

    font-size: 20px !important;
  }
}