/* Стили всплывающего окна */
  .my-popup {
    position: fixed;
    /* Располагаем чуть выше центра */
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: #333;
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    z-index: 9999;

    /* Начинаем с нулевой прозрачности */
    opacity: 0;

    /* Анимация появления */
    animation: fadeIn 0.5s forwards ease-in-out;
  }

  /* Класс для исчезновения */
  .fade-out {
    animation: fadeOut 0.5s forwards ease-in-out;
  }

  /* Анимация плавного появления */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Анимация плавного исчезновения */
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }