.mealz-planner-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 90dvh;
  justify-content: flex-start;
  align-items: center;
  background-image: url("https://storage.googleapis.com/assets.miam.tech/generic/images/meals-planner_form_bg.png");
  background-position: center;
  background-size: cover;

  .mealz-planner-form__logo {
    width: 240px;
    height: 240px;
  }

  .mealz-planner-form__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 604px;
    background: var(--mealz-ds-color-neutral-white, #fff);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0px 16px 24px 0px rgba(15, 25, 31, 0.12);

    > *:not(:last-child) {
      margin-bottom: 40px;
    }

    .mealz-planner-form__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;

      .mealz-planner-form__title {
        text-align: center;
      }

      .mealz-planner-form__guests-counter {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 16px;

        .mealz-planner-form__round-button {
          border-radius: 50%;
          flex-shrink: 0;
        }

        .mealz-planner-form__guests-container {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          margin: 0 64px;

          .mealz-planner-form__guest-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 48px;
            margin: 2px 4px;
            background-color: var(--mealz-ds-color-primary, #24748F);
            border-radius: 50%;
          }
        }

        @media (min-width: 425px) and (max-width: 600px) {
          .mealz-planner-form__guests-container {
            margin: 0 32px;
          }
        }

        @media (max-width: 425px) {
          .mealz-planner-form__guests-container {
            margin: 0 16px;
          }
        }
      }
    }

    .mealz-planner-form__budget {
      width: 100%;

      .mealz-planner-form__budget-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 12px;
        border: 1px solid var(--mealz-ds-color-neutral-200, #D9DDE1);
        border-radius: 6px;

        .mealz-planner-form__budget-optional-label {
          color: var(--mealz-ds-color-neutral-black, #0F191F);
          opacity: 0.5;
        }

        .mealz-planner-form__budget-input-container {
          display: inline-flex;
          flex-wrap: nowrap;
          flex-direction: row;
          position: relative;
          align-items: center;
          flex: 1;

          .mealz-planner-form__budget-input {
            color: var(--mealz-ds-color-primary, #24748F);
          }

          input[type=number] {
            display: block;
            border: none;
            text-align: right;
            font-size: 16px;
            line-height: 150%;
            font-weight: 700;
            cursor: pointer;
            -moz-appearance: textfield;
            width: 100%;
          }

          input::-webkit-outer-spin-button,
          input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }

          input:focus{
            outline: none;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .mealz-planner-form {
    background-image: url("https://storage.googleapis.com/assets.miam.tech/generic/images/meals-planner_form_bg_app.png");
    background-position: top;
    justify-content: space-between;
    min-height: 80dvh;

    .mealz-planner-form__container {
      width: 100%;
      height: 100%;
      padding: 24px 16px;
      box-shadow: none;
      border-radius: 32px 32px 0 0;

      .mealz-planner-form__header {
        margin-top: 16px
      }
    }

    .mealz-planner-form__submit-button {
      width: 100%;
      margin-bottom: 16px;
    }
  }
}

.mealz-planner-form__button-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 24px;
  min-width: 150px;
}

.mealz-planner-form__button-content .hidden {
  display: none;
}