/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self
 */

@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";

:root {
  --bulma-primary-h: 336deg;
  --bulma-primary-l: 55%;
  --bulma-primary-invert-h: 0;
  --bulma-primary-invert-l: 100%;
  --bulma-family-primary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bulma-weight-light: 200;
  --bulma-weight-normal: 300;
}

.field {
  --bulma-field-block-spacing: 1.25rem;
}

.input {
  --bulma-input-radius: 10px;
  --bulma-input-placeholder-color: #000;
  --bulma-input-placeholder-size: 80%;
}

.input::placeholder {
  font-size: 80%;
  font-weight: 300;
}

body {
  overflow-x: hidden;
}

.has-text-weight-light {
  font-weight: 200 !important;
}

.is-size-7 {
  font-size: 0.7rem !important;
}

#loading {
  &.is-loading::after {
    animation: spinAround .5s infinite linear;
    border: 6px solid #ff377b;
    border-radius: 9999px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: inline-block;
    height: 3em;
    width: 3em;
  }
}

.above-the-fold {
  background-image: url("top_bg-f8db8d2c.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left 0 top 8rem;
}

.survey-container {
  border: 1px solid #5D2896;
  background: linear-gradient(180deg, rgba(32, 0, 67, 0.70) -25.61%, #3D007F 100%);
  border-radius: 20px;
  margin: 0 1.75rem;
  padding: 1rem;
}

.survey {
  & .field:not(:last-child) {
    margin-bottom: 0.25rem;
  }

  & .input {
    margin-bottom: 1rem;
    background: #fff;

    &::placeholder {
      color: #000;
      opacity: 1;
      font-size: 80%;
      font-weight: 300;
    }
  }

  & .help {
    padding-left: 1rem;
    margin-top: -1.1rem;
  }
}

.appointment-box {
  background-color: #35006E;
  background-image: url("vector1-34b61748.svg");
  background-position: left 0 top -50px;
  background-repeat: no-repeat;
}

.bottom-callout {
  background-color: #35006E;
  background-image: url("vector1-34b61748.svg");
  background-position: left 0 top -50px;
  background-repeat: no-repeat;
}

.yellow-gradient {
  background-image: url("yellow_ellipse-43e69a18.svg");
  background-repeat: no-repeat;
  background-position: left 0 top -600px;
}

.testimonial-photo {
  border-radius: 9999px;
  border: 4px solid white;
  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.3), 0 0px 0 1px rgba(10, 10, 10, 0.02);
}

.cta-button {
  border-radius: 10px !important;
  border: 2px solid white !important;
  font-size: 85% !important;
  min-height: 50px !important;
  box-shadow: 0 2.76726px 2.21381px 0 rgba(0, 0, 0, 0.02), 0 6.6501px 5.32008px 0 rgba(0, 0, 0, 0.03), 0 12.52155px 10.01724px 0 rgba(0, 0, 0, 0.04), 0 22.33631px 17.86905px 0 rgba(0, 0, 0, 0.04), 0 41.77761px 33.42209px 0 rgba(0, 0, 0, 0.05), 0 100px 80px 0 rgba(0, 0, 0, 0.07) !important;
}

#page-two, #selected-offer, #offer-lp {
  background-image: url("grid-822c056f.png");
  background-repeat: repeat-x;

  & .box.offerbox {
    padding: 0;
    text-align: center;
    background-color: #8D75E6;
    border-radius: 15px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,0.3),0 0px 0 1px rgba(10,10,10,0.02);

    & .compensation {
      padding: 0.5rem 0;
      color: white;
      font-weight: 600;
      font-size: 75%;
    }

    & .innerbox {
      background-color: white;
      border-radius: 15px;
      padding: 1.25rem;
      min-height: 240px;

      & .offer-title {
        color: #35006E;
        line-height: 1.75rem;
      }

      & .button {
        min-height: 50px;
        border-radius: 10px;
      }
    }
    & .callout {
      padding: 0.5rem 0;
      color: white;
      font-weight: 600;
      font-size: 75%;
    }
  }
}


#page-two-srt {
  background-image: url("grid-822c056f.png");
  background-repeat: repeat-x;
  & .box.offerbox {
    border: 1px solid rgba(34, 36, 38, .15);
    border-bottom: 6px solid #4ab7c3;
    border-radius: 8px;
    box-shadow: 0 1px 2px #22242626;
    cursor: pointer;
    padding: 0;

    & .compensation {
      background-color: #4ab7c3;
      border-color: #4ab7c3;
      border-radius: 8px 8px 0 0;
      color: #fff;
      font-size: 85%;
      font-weight: 700;
      padding-bottom: .4rem;
      padding-left: 1.75rem;
      padding-top: .4rem;
      text-transform: uppercase;
    }

    & .innerbox {
      background-color: white;
      border-radius: 15px;
      padding: 1.25rem;
      min-height: 240px;

      & .offer-title {
        color: #215564;
        line-height: 1.8rem;
        margin-bottom: .5rem;
      }

      & .description {
        background-color: #4ab7c314;
        font-size: 90%;
        font-weight: 400;
        padding: 5px 1rem;
      }

      & .button {
        background-color: #22bf68;
        font-weight: 700;
        width: 100%;
        min-height: 50px;
      // border-radius: 9999 px;
      }
    }

    & .callout {
      padding: 0.5rem 0;
      color: white;
      font-weight: 600;
      font-size: 75%;
    }

    & .theme-10 {
      & .compensation {
        line-height: 100%;
        padding: 0.25rem 0.25rem 0.25rem 0.75rem;
        font-size: 70%;
      }

      & .innerbox {
        padding: .5rem 1.25rem;
        min-height: auto;

        & .offer-title {
          margin: 0;
          padding-bottom: 0;
          line-height: 100%;
        }

        & .description {
          background: none;
          padding: 0;
          line-height: 125%;
        }

        & .button {
          padding: 0.25rem;
          min-height: auto;
        }
      }
    }
  }
}

.popup-content {
  & .box.offerbox {
    padding: 0;
    text-align: center;
    background-color: #8D75E6;
    border-radius: 15px;
    box-shadow: 0 0.5em 1em -0.125em rgba(10,10,10,0.3),0 0px 0 1px rgba(10,10,10,0.02);

    & .compensation {
      padding: 0.5rem 0;
      color: white;
      font-weight: 600;
      font-size: 75%;
    }

    & .innerbox {
      background-color: white;
      border-radius: 15px;
      padding: 1.25rem;
      min-height: 240px;

      & .offer-title {
        color: #35006E;
        line-height: 1.75rem;
      }

      & .button {
        min-height: 50px;
        border-radius: 10px;
      }
    }
    & .callout {
      padding: 0.5rem 0;
      color: white;
      font-weight: 600;
      font-size: 75%;
    }
  }
}

.container--stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  .stepper {
    display: flex;
    align-items: center;
    max-width: 95%;
    .step {
      width: 30px;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      background-color: #e0e0e0;
      color: #333333;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      line-height:1;
      font-weight: bold;
    }
    .completed {
      background-color: #ff518c;
      color: white;
    }
    .active {
      background-color: #ff377b;
      color: white;
    }
    .line {
      width: 50px;
      height: 4px;
      background-color: #e0e0e0;
    }
    .line.completed {
      background-color: #ff518c;
    }
  }
}

.path-step-title-text {
  font-size: 22px;
  color: #000;
  margin-top: 1.5rem;
  text-align: center;
  margin-bottom: 2rem;
}

@media screen and (max-width: 768px) {
  .container--stepper {
    margin-top: 1rem;
    .stepper .step {
      width: 26px;
      font-size: 13px;
    }
  }
  .path-step-title-text {
    margin-bottom: 1rem;
    margin-top: 1rem;
    font-size: 1.35rem;
    line-height: 1.4;
  }
}