.palmistry-container {
  align-items: center;
  display: flex;
  flex: 1 1;
  flex-direction: column;
  padding: 32px;
  position: relative;
}

.palmistry-container svg {
  display: inline;
  vertical-align: baseline;
}

.palmistry-container__header {
  color: var(--midnight-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

.palmistry-container__description {
  color: var(--midnight-black);
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 24px 0;
  text-align: center;
}

.palmistry-container__bold-description {
  color: var(--midnight-black);
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.palmistry-container__form-birthday {
  margin-bottom: 24px;
  position: relative;
}

.palmistry-container__error-text {
  color: var(--coral);
  font-size: 12px;
  left: 12px;
  line-height: 16px;
  margin-left: 12px;
  opacity: 0;
  position: absolute;
  transform: translateY(-32px);
  transition: all 0.5s;
}

.palmistry-container__error-text_visible {
  opacity: 1;
  position: static;
  transform: translateY(6px);
}

.palmistry-container__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: var(--midnight-black);
  gap: 24px;
}

.palmistry-container__title {
  color: var(--midnight-black);
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  min-height: 24px;
}

.palmistry-container__bottom-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.palmistry-container__notification-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.palmistry-container__policy {
  display: flex;
  width: 100%;
}

.palmistry-container__policy p {
  width: 100%;
  color: var(--midnight-black);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.palmistry-container__policy a {
  text-decoration: underline;
}

.palmistry-container__purposes {
  color: var(--greyish-blue);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.palmistry-container__button-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.palmistry-container__button-wrapper button:not(:last-child) {
  margin-bottom: 12px;
}

.palmistry-container__button-wrapper_horizontal {
  display: flex;
  gap: 12px;
  width: 100%;
}

.palmistry-container__button-wrapper_horizontal button {
  flex: 1 1;
  max-width: none;
  min-width: auto;
}

.palmistry-container__title-wrapper {
  color: var(--midnight-black);
}

.palmistry-container__title-wrapper h3 {
  line-height: 30px;
  text-align: center;
}

.palmistry-container_single-question {
  gap: 24px;
  padding: 32px;
}

.palmistry-container__personal-statement-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  min-height: 56px;
  opacity: 0;
}

.palmistry-container__personal-statement-fade-in-animation {
  animation: personal-statement-fade-in 0.7s ease;
  opacity: 1;
}

.palmistry-container__personal-statement-button-container {
  display: flex;
  gap: 12px;
  width: 100%;
}

.palmistry-container__personal-statement-button.button {
  min-width: 30px;
}

.palmistry-container__personal-statement-text-block {
  display: flex;
  font-weight: 400;
  justify-content: space-between;
  width: 100%;
}

.palmistry-container__personal-statement-text-block > p {
  text-align: left;
  width: min-content;
}

.palmistry-container__personal-statement-text-block > p:last-child {
  text-align: right;
}

.palmistry-container__image-wrapper {
  background: var(--pale-blue);
  border-radius: 8px;
  display: flex;
  gap: 20px;
  justify-content: space-evenly;
  margin: 24px 0;
  max-width: 400px;
  min-width: 310px;
  padding: 12px;
  position: relative;
  width: 100%;
}

.palmistry-container__image-wrapper-container {
  text-align: center;
}

.palmistry-container__correct-title,
.palmistry-container__wrong-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 6px;
}

.palmistry-container__correct-title {
  color: var(--pale-green);
}

.palmistry-container__wrong-title {
  color: var(--bright-red);
}

.palmistry-container__wrapper-correct-palm-image {
  position: relative;
}

.palmistry-container__check-mark {
  bottom: 43px;
  position: absolute;
  right: -20px;
}

.palmistry-container__uncorrect-images {
  grid-gap: 6px 16px;
  align-items: center;
  display: grid;
  gap: 6px 16px;
  grid-template-columns: repeat(2, 1fr);
}

.palmistry-container__uncorrect-images > :last-child {
  margin-left: -5px;
}

.palmistry-container__take-palm-button {
  margin-bottom: 12px;
}

.palmistry-container_type_resonated-element {
  gap: 24px;
  padding: 32px;
}

.palmistry-container_type_resonated-element > div {
  margin: 0;
}

.palmistry-container_type_resonated-element > div + div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.palmistry-container_type_resonated-element button {
  gap: 24px;
  justify-content: flex-start;
  margin: 0 !important;
  min-width: 311px;
  padding: 0 24px;
}

.palmistry-container_type_color-you-like {
  padding: 32px;
}

.palmistry-container_type_color-you-like > div {
  margin: 0;
}

.palmistry-container_type_color-you-like > div + div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.palmistry-container_type_color-you-like button {
  gap: 24px;
  justify-content: flex-start;
  margin: 0 !important;
  min-width: 311px;
  padding: 0 24px;
}

.palmistry-container_type_decisions {
  padding: 32px;
}

.palmistry-container_type_decisions > div {
  margin: 0;
}

.palmistry-container_type_guidance-plan {
  gap: 24px;
}

.palmistry-container_type_personal-statement {
  color: var(--midnight-black);
  font-size: 20px;
  font-weight: 500;
  gap: 24px;
  line-height: 26px;
  text-align: center;
}

.palmistry-container_type_scan-info {
  gap: 24px;
  text-align: center;
}

.palmistry-container_type_scan-info .palmistry-container__title {
  color: var(--midnight-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.palmistry-container_type_scan-info .palmistry-container__description {
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  margin: 0;
}

.palmistry-container_type_upload {
  flex-flow: wrap;
  flex-direction: column;
  padding-top: 0;
  position: relative;
}

.palmistry-container_type_upload .palmistry-container__title {
  color: var(--midnight-black);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 32px;
  text-align: center;
}

.palmistry-container_type_scan-photo {
  color: var(--midnight-black);
}

.palmistry-container_type_scan-photo .palmistry-container__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  margin-bottom: 34px;
  text-align: center;
  animation: title-opacity 1.5s cubic-bezier(0.37, 0, 0.63, 1);
  animation-fill-mode: forwards;
}

.palmistry-container_type_scan-photo .palmistry-container__waiting-title {
  animation: waiting-title 0.5s cubic-bezier(0.37, 0, 0.63, 1);
  /* animation-delay: 14.5s; */
  animation-fill-mode: forwards;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  margin-top: 70px;
  opacity: 0;
  text-align: center;
}

.palmistry-container_type_scan-photo .palmistry-container__waiting-description {
  animation: waiting-description 8s cubic-bezier(0.37, 0, 0.63, 1);
  /* animation-delay: 15s; */
  animation-fill-mode: forwards;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  margin-top: 45px;
  opacity: 0;
  text-align: center;
}

.palmistry-container_type_email {
  color: var(--midnight-black);
  padding-top: 32px;
}

.palmistry-container_type_email .palmistry-container__title-wrapper {
  margin-bottom: 24px;
}

.palmistry-container_type_email .palmistry-container__title-wrapper h2 {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.0024em;
  line-height: 30px;
  text-align: center;
}

.palmistry-container_type_email .palmistry-container__input {
  margin-bottom: 24px;
  max-width: 400px;
  width: 100%;
}

.palmistry-container_type_email .palmistry-container__input input {
  appearance: none;
  background: var(--white-to-transparent);
  border: 1px solid var(--light-silver-to-lilac-blue);
  border-radius: 8px;
  color: var(--midnight-black);
  font-size: 16px;
  height: 48px;
  line-height: 18px;
  max-width: 400px;
  min-width: 250px;
  outline: none;
  padding: 12px 12px 15px;
  transition: border-color 0.3s ease;
  width: 100%;
}

.palmistry-container_type_email
  .palmistry-container__input
  input:not(:placeholder-shown)
  + .input__placeholder {
  font-size: 12px;
  top: 12px;
  width: auto;
}

.palmistry-container_type_email .palmistry-container__description {
  margin-top: 0;
  margin-bottom: 24px;
}

.palmistry-container_type_email .palmistry-container__description h3 {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  text-align: center;
}

.palmistry-container_type_email .palmistry-container__policy {
  display: flex;
  max-width: 400px;
  width: 100%;
}

.palmistry-container_type_email .palmistry-container__policy p {
  color: var(--midnight-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
}

.palmistry-container_type_email .palmistry-container__policy a {
  color: var(--midnight-black);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  text-decoration: underline;
}

.palmistry-container_type_email .palmistry-container__button {
  margin: 24px 0 32px;
}

.palmistry-container_type_subscription-plan {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 32px 32px;
  width: 100%;
  color: var(--midnight-black);
}

.palmistry-container_type_subscription-plan .palmistry-container__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
}

.palmistry-container_type_subscription-plan .palmistry-container__image {
  margin: 12px 0;
}

.palmistry-container_type_subscription-plan .palmistry-container__plans {
  display: flex;
  justify-content: center;
  margin-bottom: 27px;
  width: 100%;
}

.palmistry-container_type_subscription-plan .palmistry-container__plan {
  align-items: center;
  border: 2px solid var(--pale-gray);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  height: 56px;
  justify-content: center;
  max-width: 76px;
  padding: 0 4px;
  width: fit-content;
}

.palmistry-container_type_subscription-plan .palmistry-container__plan h3 {
  font-size: 16px;
  line-height: 20px;
}

.palmistry-container_type_subscription-plan
  .palmistry-container__plan:not(:last-child) {
  margin-right: 12px;
}

.palmistry-container_type_subscription-plan
  .palmistry-container__plan:last-child {
  position: relative;
}

.palmistry-container_type_subscription-plan
  .palmistry-container__plan:last-child::after {
  content: "";
  background: var(--pale-gray);
  bottom: -24px;
  height: 15px;
  position: absolute;
  width: 2px;
}

.palmistry-container_type_subscription-plan .palmistry-container__plan_active {
  background: var(--transparent-to-gold);
  border: 2px solid var(--strong-blue);
  color: var(--black-color-text);
}

.palmistry-container_type_subscription-plan
  .palmistry-container__plan_active::after {
  background: var(--strong-blue) !important;
}

.palmistry-container_type_subscription-plan
  .palmistry-container__subscription-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 120%;
  margin-bottom: 16px;
  text-align: center;
}

.palmistry-container_type_subscription-plan
  .palmistry-container__subscription-text_active {
  color: var(--blue-color-text);
}

.palmistry-container_type_subscription-plan .email-header {
  width: calc(100% + 64px);
}

.palmistry-container_type_paywall {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--midnight-black);
  padding: 0;
  position: relative;
}

.palmistry-container_type_payment {
  padding-bottom: 0;
}

.palmistry-container_type_discount {
  width: 100%;
}

@keyframes personal-statement-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes title-opacity {
  100% {
    opacity: 0;
  }
}

@keyframes waiting-title {
  100% {
    margin-top: 34px;
    opacity: 1;
  }
}

@keyframes waiting-description {
  10% {
    margin-top: 24px;
    opacity: 1;
  }
  100% {
    margin-top: 24px;
    opacity: 1;
  }
}
