.timed-popup.show {
  animation: timed-popup-backdrop-enter 0.4s ease-out forwards;
}

.timed-popup.show .popup-content {
  animation: timed-popup-content-enter 0.6s cubic-bezier(0.34, 1.1, 0.64, 1)
    0.05s both;
}

@keyframes timed-popup-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes timed-popup-content-enter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(20px) scale(0.96);
    filter: blur(4px);
  }
  50% {
    opacity: 0.85;
    transform: translate(-50%, -50%) translateY(-4px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

.timed-popup .popup-content {
  max-width: 560px;
  margin: 0;
  width: 90%;
  background: url("../img/pop-up/bg-popup.png") no-repeat center/cover;
  border-radius: 0;
  border: none;
  padding: 94px 10px 120px;
  color: #f8f9fb;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timed-popup-bonus {
  cursor: default;
  margin-top: 30px;
  margin-bottom: 40px;
  border-radius: 956.962px;
  border: 0.666px solid #88adf6;
  display: flex;
  width: 472.254px;
  max-width: 95%;
  height: 91.014px;

  animation: timed-popup-bonus-wave 2.2s ease-in-out infinite;
  transform-origin: 50% 50%;
  will-change: transform;
  padding: 17.326px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 9.507px;
  background: linear-gradient(
    135deg,
    #789fee76 0%,
    rgba(83, 137, 202, 0.2) 55.89%,
    rgba(79, 82, 217, 0.559) 100%
  );
  box-shadow: 0 5.343px 40.07px 0 rgba(252, 255, 255, 0.25);
  backdrop-filter: blur(66.78313446044922px);
  text-shadow:
    1.564px 1.564px 3.885px rgba(246, 246, 246, 0.25),
    0 1.266px 9.491px rgba(111, 104, 240, 0.25);
  -webkit-text-stroke-width: 1.25px;
  -webkit-text-stroke-color: #ffffffb7;
  font-family: Poppins, sans-serif;
  font-size: 38.634px;
  font-style: italic;
  font-weight: 900;
  line-height: 100%;
  text-transform: uppercase;
}

.timed-popup-logo {
  width: 87.573px;
  height: 41.701px;
  margin-bottom: 31px;
  display: block;
}

.timed-popup-title {
  color: #edf1f8;
  text-align: center;
  text-shadow: 0 2.173px 5.432px rgba(22, 72, 213, 0.8);
  font-family: Poppins, sans-serif;
  font-size: 32.202px;
  font-style: italic;
  font-weight: 800;
  line-height: 106%;
  text-transform: uppercase;
}

.timed-popup-subtitle {
  display: flex;
  align-items: center;
  color: #edf1f8;
  gap: 5px;
  text-align: center;
  text-shadow: 0 0.954px 2.384px rgba(22, 72, 213, 0.8);
  font-family: Poppins, sans-serif;
  font-size: 18.855px;
  font-style: normal;
  font-weight: 500;
  line-height: 106%;
  margin-bottom: 10px;
}

.timed-popup-subtitle span {
  position: relative;
  color: #a2fd04;
  font-family: Poppins, sans-serif;
  font-size: 18.855px;
  font-style: italic;
  font-weight: 700;
  line-height: 106%;
  text-transform: uppercase;
}

.timed-popup-subtitle span img {
  position: absolute;
  right: -17px;
  top: -10px;
}

.timed-popup-subtitle strong {
  position: relative;
  color: #edf1f8;
  font-family: Poppins, sans-serif;
  font-size: 18.855px;
  font-style: normal;
  font-weight: 700;
  line-height: 106%;
}

.timed-popup-subtitle strong img {
  position: absolute;
  bottom: -8px;
  left: 0;
}

.timed-popup .close {
  right: 25px;
  top: 21px;
  cursor: pointer;
}

.timed-popup-actions {
  margin: 0 auto;
}

.timed-popup-primary img {
  width: 40.678px;
  height: 40.678px;
}

.timed-popup-primary {
  margin-top: 44px;
  width: 256.367px;
  height: 58.111px;
  border-radius: 36.319px;
  background: #a2fd04;
  box-shadow:
    0 36.319px 29.055px 0 rgba(8, 9, 82, 0.17),
    0 15.173px 12.139px 0 rgba(8, 9, 82, 0.12),
    0 8.112px 6.49px 0 rgba(8, 9, 82, 0.1),
    0 4.548px 3.638px 0 rgba(8, 9, 82, 0.09),
    0 2.415px 1.932px 0 rgba(8, 9, 82, 0.07),
    0 1.005px 0.804px 0 rgba(8, 9, 82, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  color: #1149da;
  gap: 10px;
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 17.649px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  padding: 5px 26px 5px 8px;
}

.timed-popup-primary:hover {
  filter: brightness(1.2);
  transition: 0.9s;
}

.timed-popup .close {
  color: #7d86a8;
}

.timed-popup-star {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.timed-popup .popup-content {
  z-index: 1;
}

.timed-popup-star-1 {
  top: 15%;
  left: 14%;
  width: 104.938px;
  height: 113.681px;
  animation: timed-popup-star-sway 1.6s ease-in-out infinite;
}

.timed-popup-star-2 {
  top: -4%;
  right: -7%;
  width: 275.641px;
  height: 217.294px;
  animation: timed-popup-star-sway 2.1s ease-in-out infinite;
}

.timed-popup-star-3 {
  bottom: 2%;
  left: 3%;
  width: 186.937px;
  height: 179.846px;
  animation: timed-popup-star-sway 1.7s ease-in-out infinite;
}

.timed-popup-star-4 {
  bottom: -3%;
  right: -9%;
  width: 234.305px;
  height: 264.291px;
  animation: timed-popup-star-sway 1.9s ease-in-out infinite;
}

@keyframes timed-popup-star-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(8deg);
  }
}
@keyframes timed-popup-bonus-wave {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(10px, -8px) rotate(6deg);
  }
  50% {
    transform: translate(0, 12px) rotate(0deg);
  }
  75% {
    transform: translate(-10px, -8px) rotate(-6deg);
  }
}

@media screen and (max-width: 768px) {
  .timed-popup .popup-content {
    width: 95%;
    padding: 60px 12px 80px;
  }

  .timed-popup-bonus {
    width: 100%;
    max-width: 340px;
    height: auto;
    min-height: 72px;
    margin-top: 20px;
    margin-bottom: 28px;
    padding: 14px 12px;
    font-size: 28px;
  }

  .timed-popup-logo {
    width: 70px;
    height: auto;
    margin-bottom: 20px;
  }

  .timed-popup-title {
    font-size: 24px;
  }

  .timed-popup-subtitle,
  .timed-popup-subtitle span,
  .timed-popup-subtitle strong {
    font-size: 14px;
  }

  .timed-popup-primary {
    width: 100%;
    max-width: 220px;
    height: 50px;
    margin-top: 28px;
    font-size: 15px;
    padding: 8px 20px 8px 6px;
  }

  .timed-popup-primary img {
    width: 32px;
    height: 32px;
  }

  .timed-popup .close {
    right: 12px;
    top: 12px;
  }

  .timed-popup-star-1 {
    width: 60px;
    height: auto;
    top: 12%;
    left: 2%;
  }

  .timed-popup-star-2 {
    width: 140px;
    height: auto;
    top: -2%;
    right: -5%;
  }

  .timed-popup-star-3 {
    width: 100px;
    height: auto;
    bottom: 0;
    left: 0;
  }

  .timed-popup-star-4 {
    width: 120px;
    height: auto;
    bottom: -2%;
    right: -5%;
  }
}

@media screen and (max-width: 480px) {
  .timed-popup .popup-content {
    padding: 50px 10px 70px;
  }

  .timed-popup-bonus {
    max-width: 280px;
    min-height: 64px;
    font-size: 22px;
    margin-top: 16px;
    margin-bottom: 22px;
  }

  .timed-popup-logo {
    width: 56px;
    margin-bottom: 16px;
  }

  .timed-popup-title {
    font-size: 20px;
  }

  .timed-popup-subtitle,
  .timed-popup-subtitle span,
  .timed-popup-subtitle strong {
    font-size: 12px;
  }

  .timed-popup-primary {
    max-width: 200px;
    height: 46px;
    font-size: 14px;
    margin-top: 22px;
  }

  .timed-popup-star-1 {
    width: 44px;
    top: 10%;
    left: 0;
  }

  .timed-popup-star-2 {
    width: 100px;
    right: -8%;
  }

  .timed-popup-star-3 {
    width: 72px;
  }

  .timed-popup-star-4 {
    width: 88px;
    right: -10%;
  }
}