/*
 * 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("/assets/carehealth/top_bg-f8db8d2c.jpg"), linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(200, 200, 200, 100));
  background-size: cover;
  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;
  }

  .reg-select-with-placeholder {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M6.29289 8.79289C6.68342 8.40237 7.31658 8.40237 7.70711 8.79289L12 13.0858L16.2929 8.79289C16.6834 8.40237 17.3166 8.40237 17.7071 8.79289C18.0976 9.18342 18.0976 9.81658 17.7071 10.2071L12.7071 15.2071C12.3166 15.5976 11.6834 15.5976 11.2929 15.2071L6.29289 10.2071C5.90237 9.81658 5.90237 9.18342 6.29289 8.79289Z' fill='purple'/></svg>");
    background-repeat: no-repeat;
    background-position-x: calc(100% - 0.5rem);
    background-position-y: 50%;
  }
}

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

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

.yellow-gradient {
  background-image: url("/assets/carehealth/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("/assets/carehealth/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("/assets/carehealth/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;
  }
}

#default-survey-enclosure {
  #question-enclosure {
    .sms-optins {
      display: inline-flex;
      flex-direction: column;
      margin-top: 1rem;
      .optin-container {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        .sms-optin-checkbox {
          width: 1rem;
          height: 1rem;
          accent-color: #ff518c;
        }
        .optin-label {
          font-size: 10px;
          font-weight: 400;
          line-height: 14px;
          word-wrap: break-word;
        }
      }
    }
  }
}

.select-one-survey-response-button {
  width: 100%;
  background: transparent;
  overflow: hidden;
  border: #ff377b 1px solid;
  border-radius: 6px;
  color: #ff377b;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  padding: clamp(0.75rem, 2vw, 1rem);
}
.select-one-survey-response-button:hover {
  background: #ff377b;
  color: white;
}