.popup-wheel.popup {
  padding: 0;
}
.popup-wheel .popup__wrapper {
  justify-content: flex-end;
}
.popup-wheel .popup__content {
  --radius: clamp(0.938rem, 0.558rem + 0.791vw, 1.25rem);
  max-width: 100%;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: clamp(1.25rem, 0.7236842105rem + 0.0263157895 * 100vw, 1.875rem) 0 0;
  overflow: hidden;
  transition: none;
}
.popup-wheel .popup__close {
  top: clamp(1.063rem, 0.455rem + 1.266vw, 1.563rem);
  right: clamp(1.063rem, 0.455rem + 1.266vw, 1.563rem);
}

.block-wheel {
  --wheel-size: min(118vw, 546px);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: clamp(1.4375rem, 0.9005872483rem + 0.0268456376 * 100vw, 2.1875rem);
  text-align: center;
  background: #002164 url(img/wheel-bg.jpg) no-repeat top center;
}
.block-wheel__content {
  position: relative;
}
.block-wheel__logo {
  width: clamp(7.5rem, 5.7962962963rem + 0.0851851852 * 100vw, 13.25rem);
}
.block-wheel__title {
  margin-top: clamp(0.875rem, -0.162037037rem + 0.0518518519 * 100vw, 4.375rem);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-style: italic;
  font-weight: 900;
  font-family: var(--font-heading);
  font-size: min(6.4vw, 31px);
  line-height: 1.2;
}
.block-wheel__title .highlight {
  font-size: 1em;
  letter-spacing: 0.05em;
}
.block-wheel__sub-title {
  margin-top: clamp(0.625rem, 0.2175925926rem + 0.0203703704 * 100vw, 2rem);
  font-size: clamp(0.6875rem, 0.5486111111rem + 0.0069444444 * 100vw, 1.15625rem);
  line-height: 134%;
  color: var(--color-white);
}
.block-wheel__form {
  margin-top: clamp(0.625rem, 0.2546296296rem + 0.0185185185 * 100vw, 1.875rem);
}
.block-wheel__wheel {
  height: calc(var(--wheel-size) * 0.5 + 25px);
  flex: 0 0 calc(var(--wheel-size) * 0.5 + 25px);
}

.block-wheel .form__field {
  position: relative;
  display: block;
  max-width: clamp(13.125rem, 10.0197368421rem + 0.1552631579 * 100vw, 16.8125rem);
  height: clamp(2.125rem, 1.4934210526rem + 0.0315789474 * 100vw, 2.875rem);
  margin-inline: auto;
}
.block-wheel .form__icon {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: clamp(0.9375rem, 0.6597222222rem + 0.0138888889 * 100vw, 1.875rem);
  width: clamp(0.625rem, 0.3618421053rem + 0.0131578947 * 100vw, 0.9375rem);
  height: clamp(0.625rem, 0.3618421053rem + 0.0131578947 * 100vw, 0.9375rem);
}
.block-wheel .form__input {
  max-width: 100%;
  height: 100%;
  padding: clamp(0.625rem, 0.4398148148rem + 0.0092592593 * 100vw, 1.25rem) clamp(0.875rem, 0.5787037037rem + 0.0148148148 * 100vw, 1.875rem) clamp(0.625rem, 0.4398148148rem + 0.0092592593 * 100vw, 1.25rem) clamp(2.0625rem, 1.6365740741rem + 0.0212962963 * 100vw, 3.5rem);
  font-size: clamp(0.75rem, 0.5394736842rem + 0.0105263158 * 100vw, 1rem);
  background: #00152b;
  border: 0;
  border-radius: 36px;
  box-shadow: 0 2px 32px 0 rgba(2, 16, 23, 0.4);
}
.block-wheel .form__field::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 36px;
  z-index: -1;
  background: linear-gradient(to bottom, #0f2238, #203551); /* Your gradient */
}
.block-wheel .form__field:focus-within::before {
  background: white;
}
.block-wheel .form__submit {
  margin-top: clamp(0.5rem, 0.1842105263rem + 0.0157894737 * 100vw, 0.875rem);
  border-radius: clamp(1.25rem, 0.7236842105rem + 0.0263157895 * 100vw, 1.875rem);
  width: clamp(11.875rem, 8.7697368421rem + 0.1552631579 * 100vw, 15.5625rem);
  height: clamp(2.375rem, 1.375rem + 0.05 * 100vw, 3.5625rem);
  min-height: auto;
  font-weight: 500;
  font-size: clamp(0.6875rem, 0.4243421053rem + 0.0131578947 * 100vw, 1rem);
  box-shadow: 0 2px 8px 0 rgba(250, 65, 0, 0.5);
}
.block-wheel .form__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

.wheel__wrapper {
  position: relative;
  width: var(--wheel-size);
  height: var(--wheel-size);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: clamp(0.9375rem, -0.9086538462rem + 0.0923076923 * 100vw, 1.6875rem);
  background-image: linear-gradient(225deg, #1966ff 20%, #3b76fd 31.03%, #ff5183 80%, #ff5183 82%);
}
.wheel__wrapper::after, .wheel__wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  border-radius: 50%;
}
.wheel__wrapper::after {
  top: 0;
  right: -32px;
  width: 92%;
  background-color: #0054ff;
  filter: blur(115px);
}
.wheel__wrapper::before {
  bottom: -15px;
  left: -2px;
  width: 93.4%;
  background-color: #ff1457;
  filter: blur(115px);
}
.wheel__ticker {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 50%;
  translate: -50% clamp(-0.5625rem, -0.4046052632rem + -0.0078947368 * 100vw, -0.75rem);
  display: block;
  width: 0;
  height: 0;
  border-left: clamp(0.875rem, -0.5096153846rem + 0.0692307692 * 100vw, 1.4375rem) solid transparent;
  border-right: clamp(0.875rem, -0.5096153846rem + 0.0692307692 * 100vw, 1.4375rem) solid transparent;
  border-top: clamp(2.375rem, -1.4711538462rem + 0.1923076923 * 100vw, 3.9375rem) solid white;
  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));
}
.wheel__icon {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: clamp(2rem, -0.3076923077rem + 0.1153846154 * 100vw, 2.9375rem);
  height: clamp(2rem, -0.3076923077rem + 0.1153846154 * 100vw, 2.9375rem);
  border-radius: 50%;
}
.wheel__spinner {
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: clamp(0.1875rem, -0.4278846154rem + 0.0307692308 * 100vw, 0.4375rem) solid white;
  overflow: hidden;
  position: relative;
  display: grid;
  align-items: center;
  grid-template-areas: "spinner";
  background-image: radial-gradient(53.26% 53.26% at 50% 50%, rgb(253, 253, 253) 37%, rgb(251, 251, 251) 64%, rgb(242, 242, 242) 80%, rgb(232, 232, 232) 94%);
  transform: rotate(var(--rotate, 0deg));
  rotate: var(--start, 0deg);
}
.wheel__spinner * {
  grid-area: spinner;
}
.wheel__item {
  display: flex;
  align-items: center;
  padding-left: clamp(0.9375rem, 0.1682692308rem + 0.0384615385 * 100vw, 1.25rem);
  width: 50%;
  height: 50%;
  transform-origin: center right;
  transform: rotate(var(--rotate));
  user-select: none;
  clip-path: polygon(0 75%, 0% 25%, 100% 50%);
  color: blue;
}
.wheel__title {
  font-size: clamp(1.25rem, -0.2884615385rem + 0.0769230769 * 100vw, 1.875rem);
  font-weight: 900;
  line-height: 1;
  scale: -1;
  text-transform: uppercase;
}
.wheel__subtitle {
  display: block;
  font-size: clamp(0.64375rem, -0.0793269231rem + 0.0361538462 * 100vw, 0.9375rem);
  font-weight: 900;
  line-height: 1;
}

.bg-mobile {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.bg-mobile__1 {
  top: 35%;
  left: 0;
  position: absolute;
  width: min(8%, 59px);
  aspect-ratio: 0.746835443;
  background: url(img/bg-mobile-1.png) no-repeat center/contain;
}
[dir=rtl] .bg-mobile__1 {
  left: auto;
  right: 0;
  scale: -1 1;
}
.bg-mobile__2 {
  top: 53%;
  left: 0;
  position: absolute;
  width: min(28%, 147px);
  aspect-ratio: 0.7989130435;
  background: url(img/bg-mobile-2.png) no-repeat center/contain;
}
[dir=rtl] .bg-mobile__2 {
  left: auto;
  right: 0;
  scale: -1 1;
}
.bg-mobile__3 {
  top: 0;
  left: 11%;
  position: absolute;
  width: min(30%, 153px);
  aspect-ratio: 1.59375;
  background: url(img/bg-mobile-3.png) no-repeat center/contain;
}
[dir=rtl] .bg-mobile__3 {
  left: auto;
  right: 11%;
  scale: -1 1;
}
.bg-mobile__4 {
  top: 0;
  right: 10%;
  position: absolute;
  width: min(28%, 142px);
  aspect-ratio: 2.6296296296;
  background: url(img/bg-mobile-4.png) no-repeat center/contain;
}
[dir=rtl] .bg-mobile__4 {
  left: 10%;
  right: auto;
  scale: -1 1;
}
.bg-mobile__5 {
  top: 32%;
  right: 0;
  position: absolute;
  width: min(24%, 112px);
  aspect-ratio: 0.5989304813;
  background: url(img/bg-mobile-5.png) no-repeat center/contain;
}
[dir=rtl] .bg-mobile__5 {
  left: 0;
  right: auto;
  scale: -1 1;
}

.bg-desktop {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

@keyframes tick {
  40% {
    transform: rotate(-7deg);
  }
}
@keyframes selected {
  25% {
    transform: scale(1.25);
    text-shadow: 1vmin 1vmin 0 hsla(0, 0%, 0%, 0.1);
  }
  40% {
    transform: scale(0.92);
    text-shadow: 0 0 0 hsla(0, 0%, 0%, 0.2);
  }
  60% {
    transform: scale(1.02);
    text-shadow: 0.5vmin 0.5vmin 0 hsla(0, 0%, 0%, 0.1);
  }
  75% {
    transform: scale(0.98);
  }
  85% {
    transform: scale(1);
  }
}
.is-spinning .wheel__spinner {
  transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

@keyframes show {
  from {
    opacity: 0;
    translate: 0 -20px;
  }
  to {
    opacity: 1;
    translate: 0 0px;
  }
}
.wheel-result {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 0;
  opacity: 0;
  translate: 0 -20px;
  animation: 0.4s ease 0.5s both show;
}
.wheel-result__title {
  margin-top: 20px;
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-style: italic;
  font-weight: 900;
  font-family: var(--font-heading);
  font-size: min(6.4vw, 31px);
  line-height: 1.2;
}
.wheel-result__promocode {
  width: 76%;
  margin-inline: auto;
  font-size: clamp(1.125rem, 0.8657407407rem + 0.012962963 * 100vw, 2rem);
  cursor: copy;
}
.wheel-result__promocode.highlight {
  display: block;
  position: relative;
  padding: 0 0.15em;
  color: var(--color-white);
}
.wheel-result__promocode.highlight::after {
  content: "";
  display: inline-block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fa4d00;
  border-radius: 0.16em;
  -webkit-transform: matrix(1, 0, -0.2, 0.98, 0, 0);
  transform: matrix(1, 0, -0.2, 0.98, 0, 0);
}
.wheel-result__descr {
  margin-top: clamp(1.25rem, 0.3240740741rem + 0.0462962963 * 100vw, 4.375rem);
  font-size: clamp(0.6875rem, 0.5486111111rem + 0.0069444444 * 100vw, 1.15625rem);
  line-height: 134%;
  color: var(--color-white);
}
.wheel-result ~ .block-wheel__title, .wheel-result ~ .block-wheel__sub-title, .wheel-result ~ .block-wheel__form {
  opacity: 0;
  visibility: hidden;
  translate: 0 -20px;
  transition-property: opacity, translate, visibility;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  transition-delay: 0s, 0s, 0.4s;
}

@media (min-width: 660px) {
  .block-wheel {
    background-size: cover;
  }
}
@media (min-width: 750px) {
  .bg-mobile {
    display: none;
  }
  .bg-desktop {
    display: block;
  }
  .bg-desktop__1 {
    top: 0;
    left: 43.7062937063%;
    position: absolute;
    width: 17.8321678322%;
    aspect-ratio: 1.1086956522;
    background: url(img/bg-desktop-money.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__1 {
    left: auto;
    right: 43.7062937063%;
    scale: -1 1;
  }
  .bg-desktop__2 {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 12.5174825175%;
    aspect-ratio: 1.6728971963;
    background: url(img/bg-desktop-money-2.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__2 {
    left: auto;
    right: 0;
    scale: -1 1;
  }
  .bg-desktop__3 {
    top: 95px;
    right: 0;
    position: absolute;
    width: 7.5524475524%;
    aspect-ratio: 0.5094339623;
    background: url(img/bg-desktop-money-a.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__3 {
    left: 0;
    right: auto;
    scale: -1 1;
  }
  .bg-desktop__4 {
    top: 0;
    left: 5.5944055944%;
    position: absolute;
    width: 12.0979020979%;
    aspect-ratio: 1.8602150538;
    background: url(img/bg-desktop-money-3.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__4 {
    left: auto;
    right: 5.5944055944%;
    scale: -1 1;
  }
  .bg-desktop__5 {
    top: 21.7391304348%;
    left: 39.8601398601%;
    position: absolute;
    width: 7.6923076923%;
    aspect-ratio: 0.88;
    background: url(img/bg-desktop-money-4.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__5 {
    left: auto;
    right: 39.8601398601%;
    scale: -1 1;
  }
  .bg-desktop__6 {
    bottom: 57px;
    right: 0;
    position: absolute;
    width: 5.2447552448%;
    aspect-ratio: 0.3807106599;
    background: url(img/bg-desktop-money-5.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__6 {
    left: 0;
    right: auto;
    scale: -1 1;
  }
  .bg-desktop__7 {
    bottom: 0;
    left: 41.4685314685%;
    position: absolute;
    width: 18.1818181818%;
    aspect-ratio: 1.6666666667;
    background: url(img/bg-desktop-coin.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__7 {
    left: auto;
    right: 41.4685314685%;
    scale: -1 1;
  }
  .bg-desktop__8 {
    top: 11.844077961%;
    left: -1px;
    position: absolute;
    width: 9.2307692308%;
    aspect-ratio: 0.511627907;
    background: url(img/bg-desktop-coin-2.png) no-repeat center/contain;
  }
  [dir=rtl] .bg-desktop__8 {
    left: auto;
    right: -1px;
    scale: -1 1;
  }
}
@media (min-width: 750px) {
  .popup-wheel .popup__content {
    max-width: 95%;
    padding: 0;
    border-radius: var(--radius);
  }
  .popup-wheel .popup__wrapper {
    justify-content: center;
  }
  .block-wheel {
    --wheel-size: clamp(34.125rem, 19.543rem + 30.38vw, 46.125rem);
    flex-direction: row;
    gap: 0;
    background: #002164 url(img/wheel-bg-desktop.jpg) no-repeat top center;
  }
  .block-wheel__content {
    flex: 0 0 58%;
    width: 58%;
    margin-bottom: 20px;
  }
  .block-wheel__title {
    width: 95%;
    margin-inline: auto;
    font-size: clamp(1.75rem, 0.5961538462rem + 0.0246153846 * 100vw, 2.75rem);
  }
  .block-wheel__wheel {
    height: auto;
    flex: 0 0 42%;
    width: 42%;
    margin-bottom: 0;
  }
  .block-wheel .form__icon {
    width: 15px;
    height: 15px;
  }
  .block-wheel .form__field {
    max-width: clamp(16.813rem, 8.838rem + 16.614vw, 23.375rem);
    height: clamp(2.875rem, 1.508rem + 2.848vw, 4rem);
  }
  .block-wheel .form__submit {
    margin-top: clamp(0.875rem, 0.419rem + 0.949vw, 1.25rem);
    border-radius: clamp(2rem, 1.392rem + 1.266vw, 2.5rem);
    width: clamp(15.563rem, 8.195rem + 15.348vw, 21.625rem);
    height: clamp(3.563rem, 1.892rem + 3.481vw, 4.938rem);
    box-shadow: 0 4px 24px 0 rgba(250, 65, 0, 0.5);
    font-size: 18px;
  }
  .block-wheel .form__submit:hover {
    box-shadow: 0 4px 24px 0 rgba(250, 65, 0, 0.9);
  }
  .wheel {
    display: flex;
    justify-content: flex-end;
  }
  .wheel__wrapper {
    width: var(--wheel-size);
    height: var(--wheel-size);
    margin-block: clamp(-4.375rem, -6.653rem + 4.747vw, -2.5rem);
    padding: clamp(1.688rem, 1.004rem + 1.424vw, 2.25rem);
    rotate: 90deg;
  }
  .wheel__icon {
    width: clamp(2.9375rem, 1.5704113924rem + 0.0284810127 * 100vw, 4.0625rem);
    height: clamp(2.9375rem, 1.5704113924rem + 0.0284810127 * 100vw, 4.0625rem);
    rotate: -90deg;
  }
  .wheel__ticker {
    border-left: clamp(1.4375rem, 0.8299050633rem + 0.0126582278 * 100vw, 1.9375rem) solid transparent;
    border-right: clamp(1.4375rem, 0.8299050633rem + 0.0126582278 * 100vw, 1.9375rem) solid transparent;
    border-top: clamp(3.9375rem, 2.2666139241rem + 0.0348101266 * 100vw, 5.3125rem) solid white;
  }
  .wheel__item {
    padding-left: clamp(1.25rem, 0.4905063291rem + 0.0158227848 * 100vw, 1.875rem);
  }
  .wheel__title {
    font-size: clamp(1.875rem, 1.116rem + 1.582vw, 2.5rem);
  }
  .wheel__subtitle {
    font-size: clamp(0.9375rem, 0.5957278481rem + 0.0071202532 * 100vw, 1.21875rem);
  }
  .wheel-result__title {
    font-size: clamp(1.75rem, 0.5961538462rem + 0.0246153846 * 100vw, 2.75rem);
  }
  [dir=rtl] .wheel {
    scale: -1 1;
  }
  [dir=rtl] .wheel__title {
    scale: 1 -1;
  }
}
@media (min-width: 992px) {
  .bg-desktop__5 {
    left: 42.6573426573%;
  }
  .block-wheel__wheel {
    flex: 0 0 50%;
    width: 50%;
  }
  .block-wheel__content {
    flex: 0 0 50%;
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .block-wheel__wheel {
    flex: 0 0 49%;
    width: 49%;
  }
  .block-wheel__content {
    flex: 0 0 51%;
    width: 51%;
  }
}
@media (min-width: 1400px) {
  .popup-wheel .popup__content {
    max-width: 1340px;
    border-radius: var(--radius);
  }
  .popup-wheel .popup__wrapper {
    justify-content: center;
  }
}
span.highlight {
  position: relative;
  padding: 0 0.15em;
  color: var(--color-white);
  font-size: 0.93em;
  letter-spacing: 0.03em;
}
span.highlight::after {
  content: "";
  display: inline-block;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fa4d00;
  border-radius: 0.16em;
  -webkit-transform: matrix(1, 0, -0.2, 0.98, 0, 0);
  transform: matrix(1, 0, -0.2, 0.98, 0, 0);
}

/*# sourceMappingURL=style.css.map */