.card {
  border: 1px solid #58476f;
  background-color: #190233;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  border-radius: 24px;
  padding: 24px;
}

#select-pricing {
  display: flex;
  /* align-items: center; */
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: -80px;
  z-index: 1;

  > .option {
    > h3 {
      margin-bottom: 12px;
    }

    > h3,
    > p {
      text-align: center;
    }

    flex: 1 0 min(300px, 100%);
    border: 1px solid #58476f;
    background-color: #190233;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
    border-radius: 24px;
    padding: 24px;

    user-select: none;
    cursor: pointer;

    transition: 120ms background-color ease;

    &:hover {
      background-color: #3a0667;
    }

    &:active,
    &.active {
      background-color: #6432e4;
    }
  }
}

.pricing,
#survey-pricing {
  margin: 150px 0;
  h1,
  h2 {
    text-align: center;
    max-width: 700px;
    margin: 50px auto;
  }

  .options {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: flex-start;

    > .option {
      flex: 1 0 min(400px, 100%);
      border-radius: 24px;
      border: 1px solid #58476f;
      background: #190233;
      box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
      overflow: hidden;

      .title {
        display: flex;
        flex-direction: column;
        gap: 8px;
        background-color: #6432e4;
        padding: 12px 40px;
        min-height: 180px;

        > :nth-child(2) {
          flex: 1 0 auto;
        }

        > .price {
          display: flex;
          align-items: baseline;
          gap: 8px;
          margin-top: -12px;

          > h3 {
            font-size: 32px;
            color: #ffc94c;
          }
        }

        h3 {
          color: #fff;
          font-size: 36px;
          font-weight: 800;
        }

        p {
          font-size: 14px;
        }
      }

      .bottom {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: flex-end;

        padding: 12px 40px;
        color: #fff;

        > a.btn.primary {
          background: #190233;
        }
      }

      &:first-child > .title,
      &:first-child > .bottom {
        background-color: #6432e4;
      }

      &:nth-child(2) > .title,
      &:nth-child(2) > .bottom {
        background: linear-gradient(90deg, #6432e4 0.27%, #c15fff 100%);
      }

      &:nth-child(3) > .title,
      &:nth-child(3) > .bottom {
        background: #ab54f8;
      }

      > .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 24px 0;

        > p {
          height: 40px;
          display: flex;
          align-items: center;
          gap: 8px;

          padding: 0 40px;
          font-size: 20px;
          font-weight: 600;

          &:first-child {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 24px;
          }

          > icon {
            font-variation-settings:
              'FILL' 1,
              'wght' 400,
              'GRAD' 0,
              'opsz' 24;
          }

          > a {
            display: flex;
            align-items: center;
          }
        }

        > a:not(.stripe) {
          margin: 0 40px 0 auto;
        }

        > .stripe {
          min-height: 55px;
          padding: 0 40px;
          font-size: 18px;
          font-weight: 600;

          display: flex;
          align-items: center;
          gap: 16px;

          background: linear-gradient(90deg, #6432e4 0.27%, #c15fff 100%);
          color: #fff;
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);

          > img {
            width: 28px;
            aspect-ratio: 1;
          }
        }
      }
    }
  }

  &.shortened {
    width: 100%;
    > .options {
      min-width: 100%;
      > .option {
        flex: 1 0 min(285px, 100%);
        > .title,
        > .bottom {
          padding: 8px 24px;
        }

        > .bottom {
          gap: 8px;
        }

        > .content {
          gap: 8px;
          padding: 12px 0;

          > p {
            height: 30px;
            padding: 0 24px;
            font-size: 16px;
          }

          > p:first-child {
            font-size: 20px;
            margin-bottom: 8px;
          }

          > a:not(.stripe) {
            margin: 40px auto;
          }

          > .stripe {
            padding: 0 24px;
            font-size: 16px;
            margin-bottom: 8px;
          }
        }
      }

      @media screen and (min-width: 600px) and (max-width: 1000px) {
        overflow-x: auto;
        flex-wrap: nowrap;
        margin: 0 -16px;
        padding: 0 16px;
        user-select: none;

        cursor: grab;

        &:active {
          cursor: grabbing;
        }

        > .option {
          flex: 1 0 min(330px, 80vw);
        }
      }

      @media screen and (min-width: 1200px) {
        > .option {
          transition: 300ms transform ease;

          > .content > .stripe,
          > .title {
            background-size: 120%;
            background-position-x: 0;
            transition: 300ms background-position-x ease;
          }

          &:hover:not(:has(.active)) {
            /* transform: scale(1.05); */
            z-index: 1;

            > .content > .stripe,
            > .title {
              background-position-x: 100%;
            }
          }
        }
      }
    }
  }
}

.pricing-wrapper {
  position: relative;
  transition: 120ms height ease;

  > .pricing {
    position: absolute;
    margin: 80px 0 !important;
    transition: opacity 300ms ease;

    .options {
      perspective: 1000px;
      padding-top: 100px !important;
      padding-bottom: 100px !important;
    }

    .option {
      opacity: 1;
      transform: rotateY(0deg);
      filter: blur(0);
      transition:
        300ms transform ease,
        300ms filter ease,
        300ms opacity ease;
    }

    &:not(.active) {
      opacity: 0;
      .option {
        filter: blur(10px);
        pointer-events: none;
      }
    }

    &.active {
      z-index: 1;
    }
  }

  > .pricing:nth-child(1) {
    &.active {
      .option {
        transform: rotateY(0deg);
      }
    }

    &:not(.active) {
      .option {
        transform: rotateY(180deg);
      }
    }
  }

  > .pricing:nth-child(2) {
    &.active {
      .option {
        transform: rotateY(360deg);
      }
    }

    &:not(.active) {
      .option {
        transform: rotateY(180deg);
      }
    }
  }
}

.pricing div {
  form {
    max-height: 0;
    padding: 0 24px !important;
    margin-top: 0 !important;
    transition: 300ms max-height ease;
  }

  &.active form {
    margin-bottom: 24px !important;
    margin-top: 50px !important;
    max-height: 1000px;
  }
}

.cta-activated-form {
  max-height: 0;
  transition: 300ms max-height ease;
  overflow: hidden;

  &.active {
    max-height: 1000px;
  }
}