/* =========================================
   SEPTEMBER PROMO — BLUE / VIOLET / CORAL
   ========================================= */

.september-promo__bar {
  position: fixed;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;

  width: 100%;
  height: 40px;

  padding-left: calc(2.08333vw + 30px);
  padding-right: calc(2.08333vw + 30px);

  box-sizing: border-box;

  z-index: 22222;
  isolation: isolate;
  overflow: hidden;

  /*
   * Палитра как на новом фоне:
   * голубой → синий → фиолетовый →
   * розовый → коралловый → фиолетовый
   */
  background:
    linear-gradient(
      110deg,
      #69c7ee 0%,
      #7296f5 16%,
      #8955ed 32%,
      #bc57ec 47%,
      #ee62b5 61%,
      #ff806c 76%,
      #f65da2 89%,
      #ba4bea 100%
    );

  border-bottom: 0;

  box-shadow:
    0 2px 9px rgba(78, 51, 139, 0.22);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================================
   КРУПНЫЕ МЯГКИЕ КРУГИ
   ========================================= */

.september-promo__bar::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:

    /* большой круг слева */
    radial-gradient(
      circle at 11% 160%,
      rgba(83, 79, 222, 0.38) 0 105px,
      transparent 106px
    ),

    /* круг сверху по центру */
    radial-gradient(
      circle at 52% -135%,
      rgba(101, 39, 155, 0.40) 0 105px,
      transparent 106px
    ),

    /* небольшой круг справа */
    radial-gradient(
      circle at 92% 150%,
      rgba(168, 47, 174, 0.32) 0 67px,
      transparent 68px
    );
}


/* =========================================
   МЯГКИЕ СВЕТОВЫЕ БЛИКИ
   ========================================= */

.september-promo__bar::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  opacity: 0.42;

  background:
    linear-gradient(
      128deg,

      transparent 0%,
      transparent 19%,

      rgba(255, 255, 255, 0.25) 20%,
      transparent 27%,

      transparent 42%,
      rgba(255, 255, 255, 0.18) 47%,
      transparent 54%,

      transparent 66%,
      rgba(255, 255, 255, 0.20) 71%,
      transparent 78%,

      transparent 100%
    );
}


.september-promo__bar:hover {
  transform: scale(1.002);

  box-shadow:
    0 3px 13px rgba(78, 51, 139, 0.30);
}


/* =========================================
   ТЕКСТ
   ========================================= */

.september-promo__text {
  position: relative;
  z-index: 2;

  flex-shrink: 0;

  margin: 10px 12px 8px 10px;

  color: #ffffff;

  font-size: 22px;
  font-weight: 600;
  line-height: 1;

  text-shadow:
    0 1px 5px rgba(67, 35, 105, 0.22);
}


/* "3 занятия" */

.september-promo__accent {
  color: #ffffff;
  font-weight: 800;
}


/* Если в HTML пока есть inline style */

.september-promo__text > span[style] {
  color: #ffffff !important;
  font-weight: 800;
}


/* =========================================
   ПОДРОБНЕЕ
   ========================================= */

.september-promo__link {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 6px;

  flex-shrink: 0;

  margin-bottom: -5px;

  color: rgba(255, 255, 255, 0.88);

  font-size: 15px;
  font-weight: 400;

  text-shadow:
    0 1px 4px rgba(67, 35, 105, 0.20);

  transition:
    color 0.3s ease,
    transform 0.3s ease;
}


.september-promo__arrow {
  display: inline-block;

  font-size: 18px;
  line-height: 1;

  transition: transform 0.3s ease;
}


.september-promo__anchor:hover .september-promo__link {
  color: #ffffff;
}


.september-promo__anchor:hover .september-promo__arrow {
  transform: translateX(4px);
}


/* =========================================
   ЛЕНТА "АКЦИЯ"
   ========================================= */

.september-promo__ribbon {
  position: absolute;
  z-index: 102;
  left: 0;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 80px;
  text-align: right;
}


.september-promo__ribbon > span {
  position: absolute;

  top: 17px;
  left: -23px;

  display: block;

  width: 100px;

  padding: 3px 0 0;

  /*
   * Лента чуть темнее фона,
   * чтобы она не терялась.
   */
  background:
    linear-gradient(
      105deg,
      #6042d9 0%,
      #7c50ed 100%
    );

  color: #ffffff;

  font-size: 11.2px;
  font-weight: 900;
  line-height: 20px;

  letter-spacing: 0.2px;

  text-align: center;
  text-transform: uppercase;

  transform: rotate(-44deg);

  box-shadow:
    0 4px 10px rgba(63, 36, 128, 0.32);
}