.ai-survey-stack {
  position: relative;
}
.tw-text-primary {
  color: #0073b8 !important;
}
.ai-survey-app {
  background-color: white;
  color: #0073b8;
  padding: 1.5rem;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  display: none;
  transition: opacity 0.25s ease;
}
.dropzone .dz-preview.dz-image-preview {
  background-color: transparent !important;
}
.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}
.dropzone .dz-preview .dz-image img {
  display: block;
}
#yardDropzone.dropzone {
  display: flex;
  min-height: 260px;
  justify-content: center;
  align-items: center;
}
#yardDropzone.dropzone .dz-preview .dz-image {
  width: 200px;
  height: 200px;
}
#yardDropzone.dropzone .dz-preview .dz-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ai-survey-app.is-visible {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.ai-survey-app.is-visible ~ .container-form {
  display: none;
}

.ai-survey-app__inner {
  max-height: 100%;
  overflow: auto;
}

.ai-survey-app__builder {
  min-height: 520px;
}

button.ai-survey-skip {
  margin: auto;
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  border-radius: 0;
  color: #0073b8;
  background: white;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem 2rem 0;
  text-decoration: none;
  transition: color 0.2s ease;
  border: none;
  text-decoration: underline;
}
.ai-survey-app__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ai-survey-heading {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ai-survey-app__description {
  margin: 0;
  font-size: 1rem;
  color: #767676;
}

@media (max-width: 768px) {
  .ai-survey-app {
    padding: 1rem;
  }
  .ai-survey-app__builder {
    min-height: 420px;
  }
}

/* Custom classes for Survey component */
.ai-survey-download-btn {
  /* @apply btn btn-secondary fadeIn mx-auto -translate-y-2/4 relative z-30 flex w-fit text-xl px-8 py-4 flex-col items-center justify-center gap-0 active:!-translate-y-2/4 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2rem !important;
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  position: relative;
  background-color: #fff100 !important;
  color: #0073b8 !important;
  font-weight: 700;
  z-index: 30;
  transform: translateY(-50%);
  border: none;
  border-radius: 0.5rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
.ai-survey-download-btn:hover {
  background-color: #e4da0f !important;
}

.ai-survey-download-subtext {
  /* @apply text-gray-900 text-sm */
  color: #111827; /* text-gray-900 */
  font-size: 1rem; /* text-sm */
  font-weight: 600;
  line-height: 1.25rem;
}

/* Custom classes for Survey Steps component */
.ai-survey-steps-container {
  /* @apply bg-white/80 backdrop-blur-md w-full max-w-xl mx-auto p-4 space-y-4 fadeIn rounded-lg text-center transition-opacity duration-300 */
  background-color: rgba(255, 255, 255, 0.8); /* bg-white/80 */
  backdrop-filter: blur(12px); /* backdrop-blur-md */
  width: 100%;
  max-width: 36rem; /* max-w-xl */
  margin-left: auto;
  margin-right: auto;
  padding: 1rem; /* p-4 */
  border-radius: 0.5rem; /* rounded-lg */
  text-align: center;
  transition-property: opacity;
  transition-duration: 300ms;
  animation: fadeIn 0.5s ease-in-out;
  color: oklch(0.14 0 0);
}

.ai-survey-steps-container > * + * {
  margin-top: 1rem; /* space-y-4 */
}

.ai-survey-steps-error-container {
  /* @apply flex items-center justify-center gap-2 flex-col */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* gap-2 */
}

.ai-survey-steps-error-icon {
  /* @apply text-red-600 text-4xl */
  color: #dc2626; /* text-red-600 */
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
}

.ai-survey-steps-error-text {
  /* @apply text-red-600 mt-2 */
  color: #dc2626; /* text-red-600 */
  margin-top: 0.5rem; /* mt-2 */
}

.ai-survey-steps-btn-wrapper {
  /* @apply border-gradient-animated px-1 py-1 font-semibold text-center whitespace-nowrap cursor-pointer mx-auto */
  padding: 0.25rem; /* px-1 py-1 */
  font-weight: 600; /* font-semibold */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
  display: inline-block; /* To respect mx-auto and width */
}

.ai-survey-steps-btn-inner {
  /* @apply px-8 py-2 text-white text-lg */
  padding: 0.5rem 2rem; /* px-8 py-2 */
  color: #ffffff; /* text-white */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom classes for Loader component */
.ai-survey-loader-container {
  /* @apply container-three-body z-20 flex-col top-0 fadeIn */
  /* container-three-body is likely a custom class defined elsewhere, keeping it */
  z-index: 20; /* z-20 */
  flex-direction: column; /* flex-col */
  top: 0; /* top-0 */
  animation: fadeIn 0.5s ease-in-out; /* fadeIn */
}

.ai-survey-loader-text {
  /* @apply mt-8 text-2xl text-white text-center px-4 */
  margin-top: 2rem; /* mt-8 */
  font-size: 1.5rem; /* text-2xl */
  line-height: 2rem;
  color: #ffffff; /* text-white */
  text-align: center; /* text-center */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

.ai-survey-loader-subtext {
  /* @apply mt-2 text-lg text-white text-center px-4 */
  margin-top: 0.5rem; /* mt-2 */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  color: #ffffff; /* text-white */
  text-align: center; /* text-center */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

/* Custom classes for Image Preview component */
.ai-survey-preview-container {
  /* @apply relative overflow-hidden min-h-[655px] grid place-items-center pt-16 pb-24 */
  position: relative; /* relative */
  overflow: hidden; /* overflow-hidden */
  min-height: 655px; /* min-h-[655px] */
  display: grid; /* grid */
  place-items: center; /* place-items-center */
  padding-top: 4rem; /* pt-16 */
  padding-bottom: 6rem; /* pb-24 */
}

.ai-survey-preview-picture {
  /* @apply w-full h-full absolute inset-0 */
  width: 100%; /* w-full */
  height: 100%; /* h-full */
  position: absolute; /* absolute */
  inset: 0; /* inset-0 */
}

.ai-survey-preview-img {
  /* @apply absolute h-full w-full object-cover transition-opacity duration-300 */
  position: absolute; /* absolute */
  height: 100%; /* h-full */
  width: 100%; /* w-full */
  object-fit: cover; /* object-cover */
  transition-property: opacity; /* transition-opacity */
  transition-duration: 300ms; /* duration-300 */
}

.ai-survey-preview-result-img {
  /* @apply absolute h-full w-full object-cover z-10 transition-opacity duration-300 */
  position: absolute; /* absolute */
  height: 100%; /* h-full */
  width: 100%; /* w-full */
  object-fit: cover; /* object-cover */
  z-index: 10; /* z-10 */
  transition-property: opacity; /* transition-opacity */
  transition-duration: 300ms; /* duration-300 */
}

.ai-survey-preview-content {
  /* @apply w-full z-20 px-0 overflow-hidden md:px-10 md:overflow-visible has-[.swiper-container]:mt-auto */
  width: 100%; /* w-full */
  z-index: 20; /* z-20 */
  padding-left: 0; /* px-0 */
  padding-right: 0;
  overflow: hidden; /* overflow-hidden */
}

.ai-survey-preview-content:has(.swiper-container) {
  margin-top: auto; /* has-[.swiper-container]:mt-auto */
}

@media (min-width: 768px) {
  .ai-survey-preview-content {
    padding-left: 2.5rem !important; /* md:px-10 */
    padding-right: 2.5rem !important;
    overflow: visible !important; /* md:overflow-visible */
  }
}

/* Custom classes for Heading component */
.ai-survey-heading-text {
  color: #033551;
  display: none;
  text-align: center;
  margin-bottom: 1rem; /* mb-4 */
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .ai-survey-heading-text {
    margin-bottom: 1.5rem; /* md:mb-6 */
    font-size: 1.125rem; /* md:text-lg */
    line-height: 1.75rem;
  }
}

.ai-survey-heading-badge {
  /* @apply rounded-[4px] border text-[#033551] px-[5px] font-semibold leading-none mx-1 */
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  color: #033551;
  padding-left: 5px;
  padding-right: 5px;
  font-weight: 600; /* font-semibold */
  line-height: 1; /* leading-none */
  margin-left: 0.25rem; /* mx-1 */
  margin-right: 0.25rem;
}

/* Custom classes for Dropzone component */
.ai-survey-dropzone {
  /* @apply dropzone w-full !rounded-lg !p-0 !border-2 !border-dashed !border-gray-200 !cursor-pointer max-w-xl mx-auto bg-white/80 backdrop-blur-md */
  /* dropzone is likely a library class, keeping it */
  width: 100%; /* w-full */
  border-radius: 0.5rem !important; /* !rounded-lg */
  padding: 0 !important; /* !p-0 */
  border-width: 2px !important; /* !border-2 */
  border-style: dashed !important; /* !border-dashed */
  border-color: #e5e7eb !important; /* !border-gray-200 */
  cursor: pointer !important; /* !cursor-pointer */
  max-width: 36rem; /* max-w-xl */
  margin-left: auto; /* mx-auto */
  margin-right: auto;
  margin-bottom: 1rem;
  background-color: rgba(255, 255, 255, 0.8); /* bg-white/80 */
  backdrop-filter: blur(12px); /* backdrop-blur-md */
}

.ai-survey-dropzone-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.ai-survey-dropzone-icon-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.ai-survey-dropzone-icon {
  width: 4rem;
  height: 4rem;
  color: #0073b8 !important; /* text-primary */
}

.ai-survey-dropzone-add-icon-wrapper {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #9ca3af; /* bg-gray-400 */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-survey-dropzone-add-icon {
  width: 1rem;
  height: 1rem;
  color: #ffffff;
}

.ai-survey-dropzone-text-main {
  font-size: 1.125rem;
  margin-bottom: 0;
  font-weight: 500;
  color: #374151; /* text-gray-700 */
}

.ai-survey-dropzone-text-sub {
  font-size: 1rem;
  color: #374151; /* text-gray-700 */
}
.ai-survey-dropzone-actions {
  /* @apply flex flex-col w-full max-w-sm mx-auto justify-between items-center */
  display: flex; /* flex */
  flex-direction: column; /* flex-col */
  width: 100%; /* w-full */
  max-width: 24rem; /* max-w-sm */
  margin-left: auto; /* mx-auto */
  margin-right: auto;
  justify-content: space-between; /* justify-between */
  align-items: center; /* items-center */
}

/* Custom classes for Pool Builder App component */
.ai-survey-builder-container {
  /* @apply pt-12 md:pt-20 fadeIn */
  animation: fadeIn 0.5s ease-in-out;
}

.ai-survey-btn-multiselect-subtitle {
  /* @apply card-subtitle text-white grow-0 */
  color: #ffffff; /* text-white */
  flex-grow: 0; /* grow-0 */
}

/* Custom classes for Answers component */
.ai-survey-answers-container > * + * {
  margin-top: 1rem;
}

.ai-survey-navigation-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.5rem;
  width: 100%;
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
}

.ai-survey-opacity-100 {
  opacity: 1;
}

.ai-survey-opacity-0 {
  opacity: 0;
}

/* Custom classes for MultipleOptionGroup */
.ai-survey-multiple-group-container {
  display: flex;
  gap: 0.5rem;
}

.ai-survey-multiple-group-container.is-vertical {
  flex-direction: row;
}

.ai-survey-multiple-group-container.is-horizontal {
  flex-direction: column;
}

.ai-survey-multiple-group-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Custom classes for UniqueOptionGroup */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}

.ai-survey-unique-group.is-vertical {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.ai-survey-unique-group.is-horizontal {
  flex-direction: column;
  gap: 0.5rem;
}

/* Custom classes for OptionCard */
/* Horizontal Layout */
.ai-survey-option-card-horizontal-btn {
  text-align: left;
  padding: 0;
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  border: 1px solid #0073b8;
  border-radius: 1rem;
  overflow: hidden;
}

.ai-survey-option-card-horizontal-card {
  display: flex;
  backdrop-filter: blur(12px);
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  width: 100%;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.ai-survey-option-card-horizontal-card:hover {
  background-color: #0073b8;
}

.ai-survey-option-card-horizontal-card.is-checked {
  background-color: #0073b8;
}

.ai-survey-option-card-horizontal-body {
  padding: 1rem 2rem !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ai-survey-option-card-title {
  font-weight: 600;
  line-height: 1.25;
  font-size: 1.5rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  margin-bottom: 0;
}

.ai-survey-option-card-horizontal-card:hover .ai-survey-option-card-title {
  color: #ffffff !important;
}

.ai-survey-option-card-title.is-checked {
  color: #ffffff !important;
}

.ai-survey-option-card-title.is-unchecked {
  color: #0073b8 !important; /* text-primary */
}

.ai-survey-option-card-description {
  font-size: 1rem;
  flex-grow: 0;
  text-align: left;
  line-height: 1.25;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  color: #0073b8;
  font-weight: 300;
  margin-bottom: 0;
}

.ai-survey-option-card-horizontal-card:hover
  .ai-survey-option-card-description {
  color: #ffffff;
}

.ai-survey-option-card-description.is-checked {
  color: #ffffff;
}

.ai-survey-option-card-description.is-unchecked {
  color: #0073b8;
}

/* Vertical Layout */
.ai-survey-option-card-vertical-btn {
  text-align: center !important;
  cursor: pointer;
  flex-basis: 50%;
  padding: 0.5rem;
  border: none !important;
  background-color: transparent !important;
}

@media (min-width: 1280px) {
  .ai-survey-option-card-vertical-btn {
    flex-basis: 33.333333%;
  }
}

@media (min-width: 1536px) {
  .ai-survey-option-card-vertical-btn {
    flex-basis: 25%;
  }
}

.ai-survey-option-card-vertical-card {
  width: 100%;
  border: 1px solid #0073b8;
  border-radius: 1rem !important;
  overflow: hidden;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.ai-survey-option-card-vertical-card:hover {
  background-color: #0073b8;
  border: 1px solid #0073b8;
}

.ai-survey-option-card-vertical-card.is-checked {
  background-color: #0073b8;
}

.ai-survey-option-card-figure {
  background-color: #f3f4f6;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 15rem;
}

.ai-survey-option-card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ai-survey-option-card-vertical-body {
  padding: 0.5rem 1rem;
  gap: 0;
}

@media (min-width: 768px) {
  .ai-survey-option-card-vertical-body {
    gap: 0.5rem;
  }
}

.ai-survey-option-card-vertical-title {
  font-weight: 600;
  line-height: 1.25;
  font-size: 1.125rem;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .ai-survey-option-card-vertical-title {
    font-size: 1.5rem;
  }
}

.ai-survey-option-card-vertical-card:hover
  .ai-survey-option-card-vertical-title {
  color: #ffffff !important;
}

.ai-survey-option-card-vertical-title.is-checked {
  color: #ffffff !important;
}

.ai-survey-option-card-vertical-title.is-unchecked {
  color: #0073b8 !important;
}

.ai-survey-option-card-vertical-description {
  font-size: 1rem;
  color: #0073b8;
  font-weight: 300;
  flex-grow: 0;
  text-align: center;
  line-height: 1.25 !important;
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 768px) {
  .ai-survey-option-card-vertical-description {
    font-size: 1.125rem;
  }
}

.ai-survey-option-card-vertical-card:hover
  .ai-survey-option-card-vertical-description {
  color: #ffffff;
}

.ai-survey-option-card-vertical-description.is-checked {
  color: #ffffff;
}

/* Custom classes for BtnBack */
.ai-survey-btn-back {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  max-width: fit-content !important;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem !important;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  color: #0073b8 !important;
  background-color: white !important;
  border: 1px solid #0073b8 !important;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
  width: fit-content !important;
  font-size: 1.25rem !important;
}

.ai-survey-btn-back:hover {
  background-color: #0073b8 !important;
  color: white !important;
}

/* Custom classes for BtnPrimary */
.ai-survey-btn-primary {
  padding: 0.5rem 2rem;
  font-size: 1.125rem;
  width: 100%;
  max-width: 10rem;
  cursor: pointer;
  background-color: #fff100 !important;
  color: #033551 !important;
  font-weight: 700;
  border: none;
  border-radius: 0.5rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.ai-survey-btn-primary:hover {
  background-color: #e4d50e !important;
}

/* Custom classes for BtnSelect */
.ai-survey-btn-select {
  cursor: pointer;
  background-color: #033551; /* btn-primary */
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
}

/* Custom classes for TitleQuestion */
.ai-survey-title-question {
  max-width: 700px;
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 2rem;
  color: #212529;
}

@media (min-width: 768px) {
  .ai-survey-title-question {
    font-size: 2.5rem;
    font-weight: 700;
  }
}

.border-gradient-animated,
.shadow-gradient-animated {
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(115deg, #fb921b, #338aff, #3cf0c5);
  background-size: 600%;
  z-index: 2;
  position: relative;
  transition: all 0.2s ease;
  animation: anime 10s linear infinite;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.border-gradient-animated > div {
  border-radius: 5px;
}

@media (min-width: 768px) {
  .shadow-gradient-animated {
    position: absolute;
    width: 120%;
    top: 0;
    bottom: 0;
    left: 50%;
    right: 0;
    z-index: -1;
    filter: blur(30px);
    opacity: 0.8;
    height: 100%;
    transform: translate(-50%, 40%);
  }
  .border-gradient-animated:hover {
    filter: brightness(1.1);
  }
}
@keyframes anime {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Loader */
.container-three-body {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}
.three-body {
  --uib-size: 50px;
  --uib-speed: 0.8s;
  --uib-color: #fff100;
  position: relative;
  display: inline-block;
  height: var(--uib-size);
  width: var(--uib-size);
  animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
  -webkit-animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
}
.three-body__dot {
  position: absolute;
  height: 100%;
  width: 30%;
}
.three-body__dot:after {
  content: "";
  position: absolute;
  height: 0%;
  width: 100%;
  padding-bottom: 100%;
  background-color: var(--uib-color);
  filter: brightness(1.1);
  -webkit-filter: brightness(1.1);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.three-body__dot:nth-child(1) {
  bottom: 5%;
  left: 0;
  transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform-origin: 50% 85%;
  -webkit-transform-origin: 50% 85%;
}

.three-body__dot:nth-child(1)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite ease-in-out;
  -webkit-animation: wobble1 var(--uib-speed) infinite ease-in-out;
  animation-delay: calc(var(--uib-speed) * -0.3);
  -webkit-animation-delay: calc(var(--uib-speed) * -0.3);
}

.three-body__dot:nth-child(2) {
  bottom: 5%;
  right: 0;
  transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform-origin: 50% 85%;
  -webkit-transform-origin: 50% 85%;
}

.three-body__dot:nth-child(2)::after {
  bottom: 0;
  left: 0;
  animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15)
    ease-in-out;
  -webkit-animation: wobble1 var(--uib-speed) infinite ease-in-out;
}

.three-body__dot:nth-child(3) {
  bottom: -5%;
  left: 0;
  transform: translateX(116.666%);
  -webkit-transform: translateX(116.666%);
}

.three-body__dot:nth-child(3)::after {
  top: 0;
  left: 0;
  animation: wobble2 var(--uib-speed) infinite ease-in-out;
  -webkit-animation: wobble2 var(--uib-speed) infinite ease-in-out;
}

.ai-survey-actions-container {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  position: relative;
  z-index: 30;
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.ai-survey-actions-container .ai-survey-download-btn {
  transform: translateY(0);
}

.ai-survey-btn-continue {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem 2rem !important;
  font-size: 1.25rem;
  line-height: 1.75rem;
  position: relative;
  background-color: #0073b8 !important;
  color: #fff !important;
  font-weight: 700;
  z-index: 30;
  border: none;
  border-radius: 0.5rem;
  transition:
    color 0.15s ease-in-out,
    background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
@media (min-width: 768px) {
  .ai-survey-btn-continue {
    padding: 1rem 2rem !important;
  }
}
.ai-survey-btn-continue:hover {
  background-color: oklab(0.504253 -0.0508248 -0.115986) !important;
}

.ai-survey-btn-text:hover {
  text-decoration: underline;
}

@keyframes spin78236 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes spin78236 {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes wobble1 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@-webkit-keyframes wobble1 {
  0%,
  100% {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(-66%) scale(0.65);
    opacity: 0.8;
  }
}

@keyframes wobble2 {
  0%,
  100% {
    transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}

@-webkit-keyframes wobble2 {
  0%,
  100% {
    -webkit-transform: translateY(0%) scale(1);
    opacity: 1;
  }

  50% {
    -webkit-transform: translateY(66%) scale(0.65);
    opacity: 0.8;
  }
}

.fadeIn {
  -webkit-animation: gfadeIn 1s ease;
  animation: gfadeIn 1s ease;
}
@-webkit-keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeOut {
  animation-name: gfadeOut;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-fill-mode: forwards; /* mantiene el estado final (opacity:0) */
  -webkit-animation: gfadeOut 1s ease forwards;
}
@keyframes gfadeOut {
  to {
    opacity: 0;
  }
}
/* si necesitas WebKit antiguo */
@-webkit-keyframes gfadeOut {
  to {
    opacity: 0;
  }
}

.slideFadeIn {
  animation: slideFadeIn 0.8s ease forwards;
}

.slideFadeOut {
  animation: slideFadeOut 0.8s ease forwards;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}