@import url("https://fonts.googleapis.com/css2?family=Lexend&display=swap");
* {
  box-sizing: border-box;
}

body {
  background: rgb(22, 23, 27);
  font-family: "Lexend", sans-serif;
  margin: 0;
  padding: 0;
}

textarea:focus,
input:focus {
  outline: none;
}

nput:-webkit-autofill,
input:-webkit-autofill:focus {
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

.container {
  margin: 0 auto;
  max-width: 400px;
  padding: 0 32px;
}

.container_thank {
  margin: 0 auto;
  max-width: 400px;
  padding: 0 16px;
}

.step .step_item {
  display: none;
}
.step .step_item.active {
  display: block;
}
.step__footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(22, 23, 27, 0) 0%, rgba(22, 23, 27, 0.4) 13.5%, rgba(22, 23, 27, 0.6) 25%, rgba(22, 23, 27, 0.8) 38.5%, rgba(22, 23, 27, 0.9) 51%, rgba(22, 23, 27, 0.95) 65.5%, #16171B 83.5%);
}
.step__footer__wrapper {
  padding: 0 16px;
}
.step__wrapper {
  padding: 30px 16px 45px 16px;
}
.step__wrapper .message_step1 {
  width: 185px;
  position: relative;
  top: -106px;
}
.step__wrapper.chat {
  padding: 30px 16px 32px 16px;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.step__first {
  background: url(/assets/img/step_main.webp) no-repeat;
  background-size: cover;
  position: fixed;
  height: 100%;
  width: 100%;
  background-position: bottom;
}
.step__questions__field {
  background: rgb(30, 31, 36);
  border-radius: 100px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
  height: 56px;
}
.step__questions__field.last {
  margin-bottom: 22px;
}
.step__questions__field.active input:is([type=checkbox], [type=radio]) {
  background: url("/assets/img/ic_radiobutton.svg"), rgb(255, 74, 118) no-repeat;
  background-size: cover;
  border: 2px solid rgb(255, 74, 118);
}
.step__questions__field input:is([type=checkbox], [type=radio]) {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 2px solid rgb(110, 118, 137);
  border-radius: 0.3em;
  transition: background-color 300ms, border-color 300ms;
}
.step__questions__field label {
  color: rgb(140, 147, 164);
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
}
.step__questions__field label.active {
  color: rgb(255, 255, 255);
}
.step__questions__field input:is([type=radio]) {
  border-radius: 50%;
}
.step__questions__buttons_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step__questions__button {
  border-radius: 100px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  padding: 14px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: rgb(255, 255, 255);
}
.step__questions__button img {
  width: 24px;
  height: 24px;
}
.step__questions__button.bold {
  font-size: 20px;
  font-weight: 600;
}
.step__questions__button.btn_step5 {
  font-weight: 500 !important;
}
.step__questions__button.no {
  background: rgb(40, 42, 49);
}
.step__questions__button.yes {
  background: rgb(255, 74, 118);
}
.step__form {
  display: none;
  background: url("/assets/img/step_2_girl.webp") no-repeat;
  background-size: contain;
  position: fixed;
  height: 100%;
  width: 100%;
}
.step__form.step2.real {
  background: url("/assets/img/step_2_girl.webp") no-repeat;
  background-size: contain;
}
.step__form.step2.anime {
  background: url("/assets/img/step_2_anime.webp") no-repeat;
  background-size: contain;
}
.step__form.step3 {
  background: url("/assets/img/step_3_girl.webp") no-repeat;
  background-size: 100%;
}
.step__form.step3.real {
  background: url("/assets/img/step_3_girl.webp") no-repeat;
  background-size: 100%;
}
.step__form.step3.anime {
  background: url("/assets/img/step_3_anime.webp") no-repeat;
  background-size: 100%;
}
.step__form.step4 {
  background: url("/assets/img/step_4_blond.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.blonde {
  background: url("/assets/img/step_4_blond.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.brunette {
  background: url("/assets/img/step_4_brunette.webp") no-repeat;
  background-size: contain;
}
.step__form.step4.dyed {
  background: url("/assets/img/step_4_dyed.webp") no-repeat;
  background-size: contain;
}
.step__form.step5 {
  background: url("/assets/img/step_5.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step6 {
  background: url("/assets/img/step_6_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step6.small {
  background: url("/assets/img/step_6_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step6.large {
  background: url("/assets/img/step_6_large.webp") no-repeat;
  background-size: contain;
}
.step__form.step7 {
  background: url("/assets/img/step_7_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.small {
  background: url("/assets/img/step_7_small.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.medium {
  background: url("/assets/img/step_7_medium.webp") no-repeat;
  background-size: contain;
}
.step__form.step7.large7 {
  background: url("/assets/img/step_7_large.webp") no-repeat;
  background-size: contain;
}
.step__form.step8 {
  background: url("/assets/img/step_8_fully.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.open {
  background: url("/assets/img/step_8_open.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.fully {
  background: url("/assets/img/step_8_fully.webp") no-repeat;
  background-size: contain;
}
.step__form.step8.cover {
  background-size: cover;
  background-position: center;
}
.step__form.step9 {
  background: url("/assets/img/step_9_olivia.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.olivia {
  background: url("/assets/img/step_9_olivia.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.evelyn {
  background: url("/assets/img/step_9_evelyn.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.nora {
  background: url("/assets/img/step_9_nora.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9.mika {
  background: url("/assets/img/step_9_mika.webp") no-repeat center top;
  background-size: cover;
}
.step__form.step9 .step__footer__wrapper {
  display: none;
}
.step__form.step10 {
  background: rgb(22, 23, 27);
}
.step__title {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  margin-bottom: 12px;
}
.step__title.question {
  font-size: 28px;
  line-height: 35px;
}
.step__title span {
  color: rgb(255, 74, 118);
}
.step__title.last_screen {
  text-align: left;
  font-size: 28px;
  line-height: 35px;
}
.step__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
}
.step__button {
  background: rgb(255, 74, 118);
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  border-radius: 100px;
  margin: 0 auto;
  display: block;
  padding: 20px 45px;
  text-decoration: none;
  width: 100%;
  text-align: center;
  border: none;
  font-family: "Lexend", sans-serif;
}
.step__button.chat {
  padding: 20px 0;
}
.step__button span {
  font-family: "Lexend", sans-serif !important;
}
.step__chat__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid rgb(46, 48, 55);
}
.step__chat__header__wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step__chat__header__image {
  max-width: 48px;
}
.step__chat__header__name {
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  text-transform: capitalize;
}
.step__chat__header__online {
  color: rgb(18, 255, 18);
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
}
.step__chat__body {
  padding: 0 24px 0 24px;
  position: fixed;
  bottom: 92px;
}
.step__chat__message {
  background: rgb(40, 42, 49);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 14px 12px;
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  max-width: 256px;
  height: 60px;
  margin-bottom: 8px;
}
.step__chat__message_image {
  max-width: 256px;
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  padding: 165px 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 347px;
  margin-bottom: 32px;
}
.step__chat__message_image.olivia {
  background: url("/assets/img/olivia_bg.png") no-repeat;
}
.step__chat__message_image.evelyn {
  background: url("/assets/img/evelyn_bg.png") no-repeat;
}
.step__chat__message_image.nora {
  background: url("/assets/img/nora_bg.png") no-repeat;
}
.step__chat__message_image.mika {
  background: url("/assets/img/mika_bg.png") no-repeat;
}
.step .off_page {
  padding: 0 16px;
}
.step .off_page__main {
  padding: 10px 0 24px 0;
}
.step .off_page__main__image {
  max-width: 140px;
  border-radius: 50%;
  border: 5px solid rgb(255, 74, 118);
  margin: 0 auto 24px;
  display: block;
}
.step .off_page__main__title {
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 8px;
}
.step .off_page__main__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.step .off_page__main__wrapper span {
  border-right: 1px solid rgb(40, 42, 48);
  height: 16px;
}
.step .off_page__main__inf__title {
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 2px;
}
.step .off_page__main__inf__description {
  color: rgb(140, 147, 164);
  font-size: 10px;
  line-height: 12.5px;
  font-weight: 300;
}
.step .off_page__block {
  padding: 10px 16px 30px 16px;
  text-align: center;
}
.step .off_page__block__images_wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.step .off_page__block__images_wrapper img {
  max-width: 50px;
}
.step .off_page__block__image {
  max-width: 296px;
  width: 100%;
}
.step .off_page__block__title {
  color: rgb(255, 255, 255);
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}
.step .off_page__block__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}
.step .off_page__slider {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 8px;
  margin-top: 30px;
}
.step .off_page__slider__item_sub {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step .off_page__slider__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  background: rgb(45, 47, 55);
  border: 2px solid rgb(45, 47, 55);
  padding: 12px 16px;
  margin-bottom: 8px;
  width: 328px;
  height: 72px;
}
.step .off_page__slider__item.active {
  background: rgba(255, 74, 118, 0.15);
  border: 2px solid rgb(255, 74, 118);
}
.step .off_page__slider__item__image {
  max-width: 48px;
  border-radius: 50%;
}
.step .off_page__slider__item__title {
  color: rgb(255, 255, 255);
  margin-bottom: 2px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
}
.step .off_page__slider__item__title.right {
  text-align: right;
}
.step .off_page__slider__item__title_sub {
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  color: rgb(255, 74, 118);
}
.step .off_page__slider__item__description {
  color: rgb(180, 184, 197);
  text-align: left;
  font-size: 12px;
  font-weight: 300;
}
.step .off_page__slider__item__description.right {
  text-align: right;
}
.step .off_page__footer_text {
  text-align: center;
  color: rgb(18, 255, 18);
  font-size: 14px;
  line-height: 17.5px;
  font-weight: 400;
  padding-bottom: 170px;
  height: 100px;
}
.step .off_page__footer {
  width: 100%;
  background: rgb(22, 23, 27);
  padding: 25px 0 10px;
}
.step .off_page__footer__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 20px 16px;
  width: 100%;
}
.step .off_page__footer__menu__link {
  text-decoration: none;
  color: rgb(88, 95, 113);
  font-size: 12px;
  line-height: 15px;
  font-weight: 300;
}

/* Keyframe animation for the rotation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Style for the SVG loader */
.loader_image {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loader_image img {
  animation: spin 2s linear infinite;
  object-fit: cover;
  width: 80px;
  display: block;
  margin: 0 auto 8px;
}
.loader_image .text_loader {
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  color: #FFFFFF;
}

.thank_you__main {
  padding: 20px 0 0 0;
}
.thank_you__main__title {
  font-family: "Lexend", sans-serif;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 8px;
}
.thank_you__main__description {
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  color: rgb(180, 184, 197);
  margin-bottom: 25px;
}
.thank_you__main__description span {
  font-family: "Lexend", sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 700;
}
.thank_you__main__image {
  width: 100%;
}
.thank_you__subscription {
  padding-bottom: 60px;
}
.thank_you__subscription__title {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  margin-bottom: 12px;
}
.thank_you__subscription__wrapper {
  background: rgb(40, 42, 49);
  padding: 16px;
  border-radius: 20px;
}
.thank_you__subscription__list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.thank_you__subscription__list span {
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}

.whats_next {
  text-align: center;
  padding-bottom: 55px;
}
.whats_next__title {
  color: rgb(255, 255, 255);
  font-size: 16px;
  line-height: 19px;
  font-weight: 700;
  margin-bottom: 8px;
}
.whats_next__image {
  max-width: 80px;
  padding: 20px 0;
}
.whats_next__description {
  color: rgb(180, 184, 197);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
}
.whats_next__description span {
  color: rgb(255, 255, 255);
}
.whats_next__description.sm-fw {
  font-weight: 300;
}
.whats_next__title_sub {
  font-family: "Lexend", sans-serif;
  color: rgb(255, 74, 118);
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  margin-bottom: 10px;
  margin-top: 60px;
}
.whats_next__description_sub {
  color: rgb(180, 184, 197);
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}

.footer__link {
  padding-bottom: 24px;
}
.footer__link .btn {
  border-radius: 100px;
  padding: 18px 0;
  font-family: "Lexend", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  height: 60px;
}
.footer__link__gp {
  background: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: rgb(22, 23, 27);
  text-decoration: none;
}
.footer__link__gp img {
  max-width: 22px;
}
.footer__link__send_email {
  background: rgb(34, 35, 41);
  color: rgb(255, 255, 255);
  text-align: center;
  font-size: 14px !important;
  line-height: 20px !important;
}
.footer__link__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
}
.footer__link__menu__link {
  color: #585F71;
  text-decoration: none;
  font-size: 12px;
  line-height: 15px;
  font-weight: 300;
}
.footer__link__email_support {
  padding: 10px 0 0 0;
  text-align: center;
  color: #B4B8C5;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}
.footer__link__email_support a {
  color: #B4B8C5;
  text-decoration: none;
}

.popup {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999999;
}
.popup__content {
  background: #282A31;
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  border-radius: 32px;
  padding: 16px;
  width: 328px;
  height: 200px;
}
.popup__content__title {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 600;
}
.popup__content__email {
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  background: #373A43;
  border-radius: 100px;
  padding: 20px 75px;
  border: none;
  width: 296px;
  margin-bottom: 20px;
}
.popup__content__email::placeholder {
  color: #4A4E59;
}
.popup__content__link_closed, .popup__content__button {
  background: #373A43;
  border-radius: 100px;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 14px 55px;
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 144px;
  border: none;
}
.popup__content__link_closed.active, .popup__content__button.active {
  background: #FF4A76;
}
.popup__content__link_closed {
  display: none;
  margin: 0 auto;
  text-decoration: none;
  background: #FF4A76;
  text-align: center;
}
.popup .thank_message {
  display: none;
  text-align: center;
  color: #FFFFFF;
  font-size: 24px;
  line-height: 29px;
  font-weight: 600;
  margin-bottom: 20px;
  margin-top: 36px;
}

.off_page__price_info {
  text-align: center;
  color: rgb(255, 255, 255);
}
.off_page__price_info__title {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 12px;
}
.off_page__price_info__description {
  color: rgba(180, 184, 197, 0.6);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  margin-bottom: 12px;
}
.off_page__price_info__text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.off_page__price_info__amount {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.formPay {
  padding: 0 16px;
}
.formPay__title {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 32px 0;
}
.formPay__title .text {
  color: rgba(140, 147, 164, 0.6);
  text-align: center;
  font-size: 13px;
  font-weight: 300;
  width: 100%;
}
.formPay__title span {
  border-bottom: 1px solid rgb(36, 38, 44);
  width: 100%;
}

.error_stripe {
  display: none;
  color: #FF4A76;
  padding: 20px 16px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

div#stripeForm {
  height: 100%;
  margin-bottom: 30px;
}

#email {
  padding: 20px;
  background-color: #30313d;
  border-radius: 5px;
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  border: 1px solid rgb(66, 67, 83);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 6px rgba(0, 0, 0, 0.25);
  width: 100%;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  margin-bottom: 15px;
}
#email::placeholder {
  color: #a3a3a3;
  font-size: 16px;
  font-weight: 600;
}

#loader_ico {
  display: none;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

#loader_ico svg:first-child {
  display: block;
}

#loader_ico svg {
  display: none;
}

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