.app_popup {
  background-color: #000000;
  width: 401.5px;
  height: 586.5px;
  border-radius: 35px;
}


.app_popup_bg {
  position: relative;
  overflow: hidden;         /* обрезаем фон по границам */
  background: none; 
  background-color: #000000;
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 401.5px 586.5px;
  border-radius: 35px;
}



         /* ======  Inner  ======  */

    .app_popup_inner {
      display: flex;
      flex-direction: column; 
      align-items: center;
      margin: 0 auto;
      width: 401.5px; 
      height: 586.5px;
          position: relative;
          z-index: 1;
    }
    

         /* ======  Ico  ======  */


.app_popup_app_ico img {
      margin-top: 196.5px;
      width: 107.5px;
      height: 107.5px;
}

         /* ======  Title  ======  */

    .app_popup_title {
      text-align: center;
      font-family: Helvetica, sans-serif; 
      font-weight: bold;
      font-size: 39.5px;
      color: #ffffff;
            margin-top: 7.5px;
            margin-bottom: 9.5px;
    }

    .app_popup_descr {
      text-align: center;
      font-family: Helvetica, sans-serif; 
      font-weight: normal;
      font-size: 15.3px;
      line-height: 23px;
      color: #ececec;
      max-width: 310px; 
    }



         /* ======  Button  ======  */


.app_popup_btn .btn {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;   /* по вертикали внутри строки */
  justify-content: center; /* по горизонтали */
    width: 325px;
    height: 56px;
    background: #ffffff;
    border: none;
    border-radius: 28px;
      text-align: center;
      font-family: Helvetica, sans-serif; 
      font-weight: bold;
      font-size: 16.3px;
      color: #000000;
      text-decoration: none !important;
    cursor: pointer;
      /* два свойства для плавного перехода фона и цвета текста */
      transition: background-color 0.3s ease, color 0.3s ease;
      overflow: hidden;
            margin-top: 19px;
            margin-bottom: 21px;
}

    /* Обёртка для иконок */
    .icon-wrapper {
      position: relative;
      width: 20.5px;
      height: 20.5px;
      flex-shrink: 0;
    }
    .icon-wrapper img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      /* плавное изменение прозрачности */
      transition: opacity 0.3s ease;
    }
    /* изначально показываем нормальную иконку */
    .icon-wrapper img.hover {
      opacity: 0;
    }

    /* при ховере кнопки меняем фон, текст и меняем прозрачность иконок */
    .app_popup_btn .btn:hover {
      background-color: #ff2626;
      color: #ffffff;
    }
    .app_popup_btn .btn:hover .icon-wrapper img.normal {
      opacity: 0;
    }
    .app_popup_btn .btn:hover .icon-wrapper img.hover {
      opacity: 1;
    }



         /* ======  Rating  ======  */


.app_popup_rating {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;   /* по вертикали внутри строки */
  justify-content: center; /* по горизонтали */
  margin: 0 auto 14px;
      max-width: 600px;
}

.app_popup_rating_stars img {
      width: 112px;
      height: 19.5px;
}

.app_popup_rating_txt {
      text-align: center;
      font-family: Helvetica, sans-serif; 
      font-weight: normal;
      font-size: 14px;
      color: #ececec;
        margin-top: -3px;
}






         /* ======  Для JS  ======  */

  /* Overlay с затемнением 10% */
  .app_popup_overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);     /* Затемнение */
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 5000;
    pointer-events: none;
  }
  .app_popup_overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* Контейнер попапа: изначально за верхней гранью */
  .app_popup_container {
    position: fixed;
    top: -100%;           /* полностью за верхом */
    left: 50%;
    transform: translateX(-50%);
    transition: top 0.5s ease, transform 0.5s ease;
    z-index: 5001;
  }
  /* Активное состояние — по центру */
  .app_popup_container.active {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Кнопка закрытия */
  #popupCloseBtn {
    position: absolute;
    width: 48px; height: 48px;
    top: -24px; right: -24px;
    cursor: pointer;
    background-image: url('../img/btn_x.png');
    background-size: contain;
    background-repeat: no-repeat;
    transition: background-image 0.3s ease;
    z-index: 5002;
  }
  #popupCloseBtn:hover {
    background-image: url('../img/btn_x_hover.png');
  }