.fancybox__slide:has(.vj-quiz-v1):after,
.fancybox__slide:has(.vj-quiz-v1):before {
  content: none;
}

.fancybox__slide:has(.vj-quiz-v1) {
  justify-content: center;
}

.vj-quiz-v1 * {
  margin: 0;
  padding: 0;
}

.vj-quiz-v1 {
  margin: 0;
  padding: 20px;
  position: relative;
  display: none;
  height: 100%;
  max-height: 100vh;
  color: white;
  background-color: black;
  border-radius: 8px;
  overflow: hidden;
}

.vj-quiz-v1 .vj-fancy-close {
  padding: 3px;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  background-color: rgb(243, 244, 249);
  border-radius: 50%;
  cursor: pointer;
}

.vj-quiz-v1__progress-bar {
  padding: 2px 4px;
  position: absolute;
  top: 5px;
  left: 50%;
  display: none;
  width: calc(100% - 80px);
  height: 8px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.vj-quiz-v1__progress-bar.show {
  display: block;
}

.vj-quiz-v1__progress {
  width: 100%;
  height: 100%;
  transform: translateX(calc(-100% - 4px));
  background-color: rgb(204, 91, 74);
  border-radius: 10px;
}

.vj-quiz-v1__screen {
  display: none;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  height: calc(100% - 65px);
  animation: fadeIn .3s ease-in forwards;
}

.vj-quiz-v1__screen.last {
    align-items: center;
    gap: 30px;
}

.vj-quiz-v1__screen:has(.vj-quiz-v1__radio-container) {
  gap: 20px;
}

.vj-quiz-v1__screen.show {
  display: flex;
}

.vj-quiz-v1__space-container {
  padding: 20px 10px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.vj-quiz-v1__header {
  color: white;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: pre-wrap;
}

.vj-quiz-v1__subheader {
  margin-top: 20px;
  color: white;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25;
  text-align: center;
  white-space: pre-wrap;
}

.vj-quiz-v1__promo-container {
  position: relative;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 58px;
  border: 1px solid #fff3;
  border-radius: 5px;

  transition: 0.3s ease-in;
}
.vj-quiz-v1__promo-container[data-gift] {
  margin-top: 20px;
  cursor: pointer;
  position: absolute;
  bottom: -10px;
  left: 0;
  overflow: hidden;
}
.vj-quiz-v1__promo-container[data-gift] .vj-quiz-v1__gift-text {
  min-width: 290px;
}

.vj-quiz-v1__promo-container-main {
  margin-top: 50px;
}

.vj-quiz-v1__promo-container.open {
  max-width: 360px;
  background-color: rgba(204, 204, 204, 0.2);
}

.vj-quiz-v1__promo-container.open .vj-quiz-v1__gift-text,
.vj-quiz-v1__promo-container.open .vj-quiz-v1__corner-icon {
  display: block;
}

.vj-quiz-v1__corner-icon {
  position: absolute;
  display: none;
  top: -10px;
  right: -10px;
  padding: 6px;
  width: 22px;
  height: 22px;
  background-color: rgb(243, 244, 249);
  border-radius: 50%;
}

.vj-quiz-v1__icon {
  margin-bottom: -2px;
  width: 32px;
  height: 32px;
}

.vj-quiz-v1__gift-text {
  display: none;
  font-size: 14px;
  line-height: 1.43;
  font-weight: 700;
}

.vj-quiz-v1__button {
  padding: 18px 24px;
  width: 100%;
  background-color: rgb(240, 90, 90);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 14px;
  /* opacity: 0.85; */
  transition: 0.3s ease-in;
  cursor: pointer;
}

.vj-quiz-v1__button:hover {
  opacity: 1;
  background-color: rgb(244, 69, 69);

}

.vj-quiz-v1__button.start {
  max-width: 360px;
}

.vj-quiz-v1__radio-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  border: none;
}

.vj-quiz-v1__label {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  color: white;
  font-size: 14px;
  border: 1px solid #fff3;
  outline: none;
  border-radius: 5px;
  transition: .3s ease-in;
  user-select: none;
  cursor: pointer;
}

.vj-quiz-v1__label:hover {
  box-shadow: 1px 3px 5px 0 rgb(204, 91, 74);
}

.vj-quiz-v1__label-text {
  flex-basis: 100%;
}

.vj-quiz-v1__radio {
  appearance: none;
  position: relative;
  flex-basis: 20px;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

.vj-quiz-v1__radio:checked:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background-color: #ccc;
  border-radius: 50%;
  opacity: .1;
  animation: fadeIn .3s ease-in forwards;
}

.vj-quiz-v1__footer {
  position: relative;
  display: none;
}

.vj-quiz-v1__footer.show {
  display: flex;
  justify-content: end;
}

.vj-quiz-v1__navigation {
  display: flex;
  gap: 20px;
  color: white;
}

.vj-quiz-v1__button.nav {
  margin-top: 35px;
  padding: 5px;
}

.vj-quiz-v1__button.nav:disabled {
      background-color: transparent;
      opacity: .5;
      cursor: default;
}

.vj-quiz-v1__navigation svg {
  margin-bottom: -3px;
  width: 24px;
}

.vj-quiz-v1__last-form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.vj-quiz-v1__last-input {
  padding: 18px 24px 14px;
  width: 100%;
  color: black;
  font-size: 16px;
  text-align: center;
  outline: none;
  background-color: white;
  border: none;
  border-radius: 10px;
  transition: .3s ease-in;
}
.vj-quiz-v1__last-input:focus {
  box-shadow: 1px 3px 5px 0 rgb(204, 91, 74);
}
.vj-quiz-v1__button.last {
  grid-column: 1 / 3;
}
.vj-quiz-v1__button.last:disabled {
  pointer-events: none;
  opacity: .5;
}
.vj-quiz-v1__last-input.name {
  grid-column: 1 / 3;
}
.vj-quiz-v1__last-input.code {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vj-quiz-v1__last-input.code img {
  margin-top: -2px;
  display: block;
  height: 18px;
  width: auto;
}
@media (min-height: 700px) {
  .vj-quiz-v1 {
    max-height: 80vh;
  }
}

@media (min-width: 576px) {
  .vj-quiz-v1 {
    width: 100%;
    max-width: 576px;
  }

  .vj-quiz-v1__space-container {
    padding: 32px 32px 20px;
  }

  .vj-quiz-v1__header {
    font-size: 32px;
  }

  .vj-quiz-v1__subheader {
    font-size: 16px;

  }
}

@media (min-width: 992px) {
  .vj-quiz-v1 {
      max-height: 90vh;
  }
}

@keyframes fadeIn {
  from {
    opacity: .1;
  }
  to {
    opacity: 1;
  }
}