/*** Base / Page ***/
body.free-quiz {
  background: linear-gradient(to bottom, #2c0914, #000);
}

img.roulette-arrow {
  max-height: 45px;
}

div#freeQuizWrap {
  min-height: 100vh;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

div#freeQuizWrap > div {
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

.row.justify-content-center {
  height: 100%;
  align-items: center;
}

/*** Card / Layout ***/
.card.shadow-sm {
  border-radius: 40px;
  border: 1px solid #fff;
  background: #fff;
  box-shadow: 0 0 24px 0 #e30158 !important;
}

.card-body {
  padding: 50px 20px;
}

.card-body > h2,
.card-body > p {
  display: none;
}

/*** Heading / Question ***/
.nq-heading {
  width: 66.666666667%;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: clamp(16px, 4vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.nq-heading span {
  display: block;
  font-size: clamp(23px, 4vw, 28px);
  font-weight: 700;
  margin-bottom: 10px;
}

.nq-heading + .col-lg-8 {
  margin-top: 50px;
  margin-bottom: 50px;
}

div#quizQuestion {
  max-width: 620px;
  margin: auto;
  font-family: Inter;
  font-weight: 700 !important;
  line-height: normal;
  font-size: clamp(16px, 4vw, 20px) !important;
}

/*** Quiz Options (Buttons) ***/
div#quizOptions {
  gap: 10px;
  max-width: 490px;
  margin: 25px auto;
}

button.list-group-item.list-group-item-action {
  border-radius: 4px;
  border: 1px solid rgba(225, 225, 237, 0.62);
  background: #f6f6f6;
  padding: 12px;
  color: #202937;
  text-align: center;
  font-family: Inter;
  font-size: clamp(14px, 3.5vw, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

button.list-group-item.list-group-item-action:hover,
button.list-group-item.list-group-item-action.nq-active {
  border-radius: 4px;
  background: #ec1764;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
}

/*** Feedback / Reload ***/
#quizFeedback.text-success {
  color: #1eff8b !important;
  font-family: Inter;
  font-size: clamp(15px, 4vw, 23px);
  font-style: normal;
  line-height: normal;
}

div#quizFeedback + .d-flex {
  margin-top: 14px !important;
}

button#reloadQuiz {
  color: #ec1764;
  text-align: center;
  font-family: Inter;
  font-size: clamp(14px, 3.5vw, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  padding: 0;
}

/*** As Featured In (AFI) Section ***/
.nq-afisection-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 35px;
}

.nq-afisection-container__item {
  background: #1c1215;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 200px;
  width: 100%;
  height: 80px;
}

/*** Modal (Spin / Email) ***/
.modal-content {
  background: none;
  border: none;
}

.modal-body {
  border-radius: 40px;
  border: 1px solid #fff;
  background: #260e1c;
  box-shadow:
    0 0 24px 0 #e30158,
    0 4px 24px 0 rgba(0, 0, 0, 0.05);
  padding: 40px 20px;
}

.modal-header,
.modal-footer.justify-content-between {
  display: none;
}

div#freeSpinModal {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
}

button.modalCloseX {
  position: absolute;
  top: -50px;
  right: 0;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

div#rewardStatus {
  display: none;
}

div#freeSpinStatus {
  background: none;
  border: none;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0;
}

div#wheelWrapper + p {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 35px;
}

/*** Spin CTA + Disabled State ***/
.spinNow,
#spinNowBtn {
  border-radius: 4px;
  background: #1eff8b;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  opacity: 1;
  color: #260e1c;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  max-width: 410px;
  width: 100%;
  padding: 15px;
  text-transform: uppercase;
  margin: auto;
  cursor: pointer;
}

#spinNowBtn {
  display: none;
}

.modal-body.nq-disabled div#wheelWrapper + p,
.modal-body.nq-disabled .spinNow,
.modal-body.nq-disabled #spinNowBtn {
  display: none;
}

/*** Reward Widget ***/
.rewardWidget {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
}

.modal-body.nq-disabled .rewardWidget {
  display: flex;
}

.rewardFun {
  border-radius: 4px;
  background: #eb1a65;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 7px 12px;
}

span.rewardExpiry {
  border-radius: 4px;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 6px 12px;
}

span.rewardNote {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

div#rewardTimerBar {
  display: none;
}

/*** Email Stage / OTP Layout ***/
div#emailStage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 550px;
  margin: auto;
}

div#rewardStatus,
.rewardWidget,
.rewardTicketHero {
  grid-column: span 3;
}

div#rewardStatus + .mb-3 {
  grid-column: span 2;
}

div#rewardStatus + .mb-3 .form-label {
  display: none;
}

div#rewardStatus + .mb-3 input#freeEmail {
  height: 50px;
}

.emailBtns {
  grid-row: 2;
  grid-column: 3/4;
  margin-left: 20px;
}

.emailBtnCode,
.emailBtnVerify {
  border: none;
  border-radius: 4px;
  background: #1eff8b;
  color: #260e1c;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 15px;
  cursor: pointer;
}

.emailBtnVerify {
  display: none;
}

.emailBtnResend {
  display: none;
  color: #eb1a65;
  text-align: center;
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 15px;
  cursor: pointer;
}

div#otpRow:not(.d-none) ~ .emailBtns {
  display: none;
}

div#emailStage:not(.nq-otpshow) div#otpRow + .justify-content-end {
  display: none !important;
}

/*** OTP State ***/
.nq-otpshow div#otpRow {
  grid-column: span 3;
}

.nq-otpshow input#freeOtp {
  height: 50px;
}

.nq-otpshow div#otpRow label.form-label,
.nq-otpshow div#otpRow .form-text {
  display: none;
}

.nq-otpshow div#rewardStatus + .mb-3 {
  grid-column: span 3;
}

.nq-otpshow div#otpRow + .justify-content-end {
  grid-column: span 3;
  flex-direction: column-reverse;
}

.nq-otpshow button#verifyOtpBtn {
  border-radius: 4px;
  background: #1eff8b;
  color: #260e1c;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 15px;
}

.nq-otpshow button#sendOtpBtn {
  color: #eb1a65;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: none;
  border: none;
  margin-bottom: 30px;
}

.nq-sent.nq-otpshow div#rewardStatus {
  display: block;
  color: #1eff8b;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: none;
  border: none;
  padding: 0;
}

.nq-sent .emailBtns {
  grid-row: 3;
}

.nq-sent div#rewardStatus {
  display: block;
  color: #eb1a65;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  background: none;
  border: none;
  padding: 0;
}

/*** Reward Ticket ***/
.rewardTicket {
  background:
    linear-gradient(
      46deg,
      #fbf89c -0.62%,
      #f9f497 2.34%,
      #f5e98a 6.3%,
      #edd774 9.27%,
      #e3be56 13.22%,
      #d8a335 17.18%,
      #c9942f 21.13%,
      #a46d22 30.03%,
      #a16921 31.02%,
      #aa7224 35.96%,
      #c28c2d 42.88%,
      #d8a335 48.82%,
      #e4c159 54.75%,
      #f0df7d 62.66%,
      #f8f193 69.58%,
      #fbf89c 73.54%,
      #fbf89c 79.47%,
      #f8f193 81.45%,
      #f0df7d 83.42%,
      #e4c15a 87.38%,
      #d8a335 89.36%,
      #d8a638 93.31%,
      #dab142 97.27%,
      #dcb949 98.26%
    ),
    #fffdf4;
  width: fit-content;
  padding: 17px 40px;
  margin: auto;
  color: #fff;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
}

.rewardTicket::after {
  content: "";
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  position: absolute;
  border: 2px dashed #ffaf08;
  background: transparent;
}

span.rewardFun.rewardFunTicket {
  background: none;
  color: #eb1a65;
  font-family: Inter;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  padding: 0;
}

.emailCopyOTP {
  color: #fff;
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 20px auto 10px;
}

/*** Roulette ***/
div#quizPointer {
  width: auto;
  height: auto;
  border: none;
  position: relative;
  z-index: 1;
}

div#quizWheel {
  z-index: 1;
  margin: 0;
  --slice: 60deg;
  --offset: 00deg;
  aspect-ratio: 1;
  border: 5px solid #030303;
  border-radius: 50%;
  position: relative;
  overflow: hidden;

  background: conic-gradient(
    from var(--offset),
    #260e1c 0 var(--slice),
    transparent var(--slice) calc(var(--slice) * 2),
    #260e1c calc(var(--slice) * 2) calc(var(--slice) * 3),
    transparent calc(var(--slice) * 3) calc(var(--slice) * 4),
    #260e1c calc(var(--slice) * 4) calc(var(--slice) * 5),
    transparent calc(var(--slice) * 5) 360deg
  );
}

div#quizWheel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: radial-gradient(
    51.36% 51.36% at 50% 50%,
    #d3145b 48%,
    #d32132 78%,
    #d41d36 83%,
    #da1343 88%,
    #e30158 93%,
    #e5005b 94%,
    #d3145b 100%
  );

  -webkit-mask: conic-gradient(
    from var(--offset),
    transparent 0 var(--slice),
    #000 var(--slice) calc(var(--slice) * 2),
    transparent calc(var(--slice) * 2) calc(var(--slice) * 3),
    #000 calc(var(--slice) * 3) calc(var(--slice) * 4),
    transparent calc(var(--slice) * 4) calc(var(--slice) * 5),
    #000 calc(var(--slice) * 5) 360deg
  );
  mask: conic-gradient(
    from var(--offset),
    transparent 0 var(--slice),
    #000 var(--slice) calc(var(--slice) * 2),
    transparent calc(var(--slice) * 2) calc(var(--slice) * 3),
    #000 calc(var(--slice) * 3) calc(var(--slice) * 4),
    transparent calc(var(--slice) * 4) calc(var(--slice) * 5),
    #000 calc(var(--slice) * 5) 360deg
  );
}

div#wheelWrapper::before {
  content: "";
  width: 320px;
  height: 320px;
  display: block;
  background: url('assets/free_quiz-v2/roulette-outer.png');
  background-size: contain;
  position: absolute;
  bottom: -20px;
  left: -20px;
  z-index: 0;
}

div#wheelWrapper::after {
  content: "";
  width: 60px;
  height: 60px;
  display: block;
  position: absolute;
  background: url('assets/free_quiz-v2/roulette-center.png');
  background-size: contain;
  top: calc(50% + 25px);
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
}

.quiz-label {
  background: linear-gradient(
    0deg,
    #fbf89c -2%,
    #f9f497 1.09%,
    #f5e98a 5.22%,
    #edd774 8.32%,
    #e3be56 12.45%,
    #d8a335 16.58%,
    #e4c159 24.07%,
    #d8a335 34.8%,
    #f0df7d 40.4%,
    #f8f193 71.3%,
    #fbf89c 75.43%,
    #fbf89c 81.62%,
    #f8f193 83.68%,
    #f0df7d 85.75%,
    #e4c15a 89.88%,
    #d8a335 91.94%,
    #d8a638 96.07%,
    #dab142 100.2%,
    #dcb949 101.24%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 16px;
}

/*** Responsive ***/
@media screen and (max-width: 767px) {
  .modal-body {
    max-height: 90vh;
    overflow: auto;
  }

  button.modalCloseX {
    top: -45px;
    right: 0;
  }

  div#wheelWrapper {
    margin: 0 !important;
  }

  div#wheelWrapper + p {
    margin-top: 40px;
    font-size: 16px;
    font-weight: 400;
  }

  .nq-heading {
    width: 100%;
  }

  .rewardTicket {
    display: block;
    font-size: 33px;
  }

  .rewardTicket::after {
    top: -2px;
    left: -2px;
  }

  span.rewardFun.rewardFunTicket {
    font-size: 33px;
  }

  .emailCopyOTP {
    font-size: 14px;
  }

  div#rewardStatus + .mb-3 {
    grid-column: span 3;
    margin-bottom: 10px !important;
  }

  .emailBtns {
    grid-row: 3;
    grid-column: span 3;
    margin: 0;
    margin-bottom: 10px;
  }

  span.rewardNote {
    flex-basis: 100%;
    font-size: 14px;
    margin-bottom: 5px;
  }

  .rewardWidget {
    flex-wrap: wrap;
  }

  .nq-otpshow div#rewardStatus {
    font-size: 14px;
  }

  .nq-sent .emailBtns {
    grid-row: 4;
  }
}

@media screen and (max-width: 500px) {
  div#freeQuizWrap {
    padding-top: 40px !important;
  }

  .nq-afisection-container {
    gap: 5px;
    margin-top: 10px;
  }

  .nq-afisection-container img {
    width: 80%;
  }

  .nq-afisection-container__item {
    max-width: 115px;
    height: 50px;
  }
}