/*
 * 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;
      }

      .offer-disclaimer-text {
        font-size: 10px;
        margin-top: 1rem;
        color: #8A8A8A;
        text-align: left;
      }
    }
    & .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;
}

.buttons-container {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  .claim-offer-button {
    padding: 1rem 1.5rem;
    background: #0147A4;
    border-radius: 6px;
    gap: 1rem;
    color: #FAFAFA;
    font-size: 1rem;
    line-height: 1rem;
    word-wrap: break-word;
    cursor: pointer;
    /*if they all want to stay same size*/
    flex: 1;
    transition: 250ms ease-in-out all;
  }
  .claim-offer-button:hover {
    border-color: #b5b5b5;
    color: white;
    background: #003781;
  }
}

@media screen and (max-width: 768px) {
  .buttons-container {
    gap: 0.75rem;
    flex-direction: column-reverse;
  }
}

.modern-buttons-content-container {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem);
  background-color: white;
  border-radius: 15px;
  .question-title {
    font-size: min(calc(100% + 1.75vw), 1.6rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: clamp(2rem, 3vw, 3rem);
    color: #35006E;
    line-height: 1.75rem;
  }
  .buttons-container {
    gap: clamp(12px, 2vw, 16px);
    display: flex;
    flex-direction: column;
    .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);
    }
    .button:hover {
      background: #ff377b;
      color: white;
    }
  }
}