.ReactModal__Content.ReactModal__Content--after-open:has(.DayPicker) {
  div:has(> [data-servicify="timezone-image"]) {
    display: flex;
  }
  .DayPicker-Caption > div {
    font-family: var(--global-font) !important;
    font-size: 24px !important;
    font-weight: 550 !important;
    line-height: 32px !important;
    letter-spacing: 0em !important;
    color: #36968c !important;
  }
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(
      .DayPicker-Day--selected
    ):not(.DayPicker-Day--outside) {
    background: #b4e4e0 !important;
  }
  .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(
      .DayPicker-Day--outside
    ) {
    background-color: #36968c !important;
  }
}

.ReactModal__Content.ReactModal__Content--after-open.Servicify-Modal:has(
    [data-servicify="servicify-add-to-cart-button"]
  ) {
  padding: 50px !important;
  [data-servicify="custom-field-wrapper"] {
    margin: 25px 0 !important;
    [data-servicify="custom-field-label"] {
      font-family: var(--global-font);
      font-size: 18px;
      font-weight: 400;
      line-height: 30px;
      letter-spacing: 0em;
      text-align: left;
    }
  }
  [data-servicify="servicify-add-to-cart-button"] {
    max-width: 375px !important;
    width: 100% !important;
    background: #40a56d !important;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-radius: 100px;
    text-decoration: none;
    height: 50px;
    text-align: center;
    font-weight: 550;
    font-size: 15px;
    border: none;
    transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer;
    &:hover {
      background-color: #fff !important;
      border-color: #40a56d !important;
      color: #40a56d !important;
      border: 1px solid !important;
    }
  }
}

.ReactModal__Content.ReactModal__Content--after-open:has(
    [data-servicify="checkout"]
  ) {
  .servicify-modal-close + div {
    display: flex;
    & > div {
      width: 50%;
    }
    &::before {
      content: "";
      background: url("https://cdn.shopify.com/s/files/1/0594/8335/7393/files/dialog_left_image.jpg?v=1686000613");
      background-size: cover;
      background-repeat: no-repeat;
      flex: 1;
    }
    [data-servicify="meta-wrapper"] {
      [data-servicify="checkout"] {
        max-width: 375px !important;
        width: 100% !important;
        background: #40a56d !important;
        color: #fff !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px;
        border-radius: 100px;
        text-decoration: none;
        height: 50px;
        text-align: center;
        font-weight: 550;
        font-size: 15px;
        border: none;
        transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        cursor: pointer;
        &:hover {
          background-color: #fff !important;
          border-color: #40a56d !important;
          color: #40a56d !important;
          border: 1px solid !important;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .ReactModal__Content.ReactModal__Content--after-open:has(.DayPicker) {
    height: 95% !important;
    width: 95% !important;
  }
  .ReactModal__Content.ReactModal__Content--after-open.Servicify-Modal:has(
      [data-servicify="servicify-add-to-cart-button"]
    ) {
    height: 95% !important;
    width: 95% !important;
  }
  .ReactModal__Content.ReactModal__Content--after-open:has(
      [data-servicify="checkout"]
    ) {
    height: 95% !important;
    width: 95% !important;
    .servicify-modal-close + div {
      display: grid;
      & > div {
        width: 100%;
        display: flex;
        flex-direction: column;
        & > div {
          flex: 1;
        }
      }
      &::before {
        height: 200px;
      }
    }
  }
}