/*
  ReutPrint — красная подвесная бирка акции v2
  Подключать ПОСЛЕ основного reutprint-price-tables.css.

  Исправлено:
  - бирка целиком находится внутри верхней границы модуля;
  - верхняя часть больше не является отдельным треугольником;
  - корпус однотонный, поэтому нет видимого разрыва градиента;
  - жёлтый шнур идёт сверху к отверстию, а не свисает внутрь;
  - нижние углы полностью залиты красным;
  - анимация из основного CSS сохраняется.
*/

.rp-price-table-promo {
  /*
    В основном CSS бирка уже position:absolute.
    Здесь задаём только безопасное положение по вертикали.
    Верхняя кнопка-шляпка начинается примерно в 3px от края модуля.
  */
  top: 38px;

  overflow: visible;

  color: #ffffff !important;
  background: #df2436;

  border: 0;
  border-radius: 16px 16px 19px 19px;
  clip-path: none;

  /*
    Небольшой объём без градиента:
    корпус остаётся одним ровным красным цветом.
  */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(120, 5, 25, 0.14),
    0 15px 23px rgba(139, 16, 35, 0.25),
    0 4px 8px rgba(139, 16, 35, 0.15);

  filter: none;

  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* Жёлтый шнур: сверху вниз — точно до центра отверстия. */

.rp-price-table-promo::before {
  content: "";

  position: absolute;
  top: -27px;
  left: 50%;
  z-index: 3;

  width: 4px;
  height: 43px;

  background: #f5bd35;
  border-radius: 999px;

  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.34),
    0 1px 2px rgba(109, 65, 0, 0.18);

  transform: translateX(-50%);
  transform-origin: 50% 100%;

  pointer-events: none;
}

/* Металлическое отверстие в корпусе бирки. */

.rp-price-table-promo::after {
  content: "";

  position: absolute;
  top: 9px;
  left: 50%;
  z-index: 4;

  width: 14px;
  height: 14px;

  background: #f7f4ff;

  border: 3px solid #efb82f;
  border-radius: 50%;

  box-shadow:
    inset 0 1px 3px rgba(83, 20, 32, 0.30),
    0 1px 2px rgba(255, 255, 255, 0.48);

  transform: translateX(-50%);
  pointer-events: none;
}

/*
  Текст занимает всю поверхность бирки.
  Верхний внутренний отступ оставляет место под отверстие.
*/

.rp-price-table-promo__text {
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 28px 10px 12px;

  color: inherit;
  text-align: center;

  pointer-events: none;
}

/* Белая точка-крепление над шнуром. */

.rp-price-table-promo__text::before {
  content: "";

  position: absolute;
  top: -34px;
  left: 50%;

  width: 14px;
  height: 14px;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #f4f2f8 58%,
      #d9d5e1 100%
    );

  border: 1px solid rgba(63, 49, 84, 0.10);
  border-radius: 50%;

  box-shadow:
    0 2px 5px rgba(36, 29, 78, 0.18);

  transform: translateX(-50%);

  pointer-events: none;
}

.rp-price-table-promo__text::after {
  content: none;
}

.rp-price-table-promo:hover,
.rp-price-table-promo:focus-visible {
  color: #ffffff !important;
  background: #c91c30;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -2px 0 rgba(103, 4, 20, 0.16),
    0 18px 28px rgba(139, 16, 35, 0.30),
    0 5px 10px rgba(139, 16, 35, 0.18);
}

.rp-price-table-promo:focus-visible {
  outline: 3px solid rgba(223, 36, 54, 0.28);
  outline-offset: 4px;
}

/* Мобильная версия */

@media (max-width: 680px) {

  .rp-price-table-promo {
    /*
      Верхняя точка также остаётся внутри модуля:
      32px - 29px = 3px.
    */
    top: 32px;

    border-radius: 13px 13px 16px 16px;
  }

  .rp-price-table-promo::before {
    top: -23px;

    width: 3px;
    height: 36px;
  }

  .rp-price-table-promo::after {
    top: 8px;

    width: 11px;
    height: 11px;

    border-width: 2px;
  }

  .rp-price-table-promo__text {
    padding: 23px 7px 10px;
  }

  .rp-price-table-promo__text::before {
    top: -29px;

    width: 12px;
    height: 12px;
  }

}