.main-container:has(.page-container) {
  margin-bottom: calc(var(--nav-clearance) + 7.6rem);
}

.main-container .page-container {
  margin-top: 3rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .main-container .page-container {
    margin-top: 2.8rem;
  }
}

  .main-container .page-container > * {
    animation: fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .main-container .page-container > :nth-child(2) {
    animation-delay: .1s;
  }

  .main-container .page-container > :nth-child(3) {
    animation-delay: .2s;
  }

  .main-container .page-container > :nth-child(4) {
    animation-delay: .3s;
  }

  .main-container .page-container > :nth-child(n+5) {
    animation-delay: .4s;
  }

  .main-container .input-card,
  .main-container .condition-fields,
  .main-container .external-info-card,
  .main-container .market-code-card {
    margin-bottom: 2rem;
  }

    .main-container .input-card .input-card {
      margin-bottom: 0;
    }

  .main-container .page-container .font-size-14.font-softtec-bold {
    margin: 1rem 0 1.2rem 0;
  }

  .main-container .registration-sheet > div:not(:first-child):not(.page-header) > h2.font-size-14.font-softtec-bold {
    margin-top: 0;
  }

  .main-container .button-container {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: calc(10.4rem + env(safe-area-inset-bottom, 0px));
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    background-color: transparent !important;
    box-shadow: none;
    width: auto !important;
    pointer-events: none;
  }

    .main-container .button-container::before {
      content: none;
    }

    .main-container .button-container > * {
      pointer-events: auto;
    }

    .main-container .button-container > .d-flex:not(:has(*)) {
      display: none !important;
    }

    .main-container .button-container .red {
      display: flex;
      align-items: center;
      gap: .6rem;
      background-color: var(--softtec-white);
      border-radius: 2.4rem;
      box-shadow: var(--floating-shadow);
      padding: .8rem 1.4rem;
      font-size: var(--font-size-12);
      animation: fade-in-up .3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .main-container .button-container .booking-btn {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      width: auto !important;
      min-width: 0 !important;
      height: 4.8rem;
      min-height: 4.8rem;
      margin: 0 !important;
      padding: 0 2.4rem;
      border-radius: 2.4rem;
      box-shadow: var(--floating-shadow);
      font-size: var(--font-size-14);
      white-space: nowrap;
    }

      .main-container .button-container .booking-btn::before {
        font-family: "FontAwesome";
        content: "\f00c";
        font-size: 1.4rem;
      }

  @media (hover: hover) and (pointer: fine) {
    .main-container .button-container .booking-btn:hover {
      transform: translateY(-2px);
    }
  }

    .main-container .button-container:not(:has(.booking-btn)):not(:has(.red, .check-green)) {
      display: none;
    }

@media (max-width: 768px) {
  .main-container .button-container {
    left: .8rem;
    right: .8rem;
    bottom: calc(8.2rem + env(safe-area-inset-bottom, 0px));
  }

  .main-container .button-container .booking-btn {
    height: 4.4rem;
    min-height: 4.4rem;
    padding: 0 2rem;
  }
}

.main-container form:not(.is-dirty) .button-container .booking-btn {
  display: none !important;
}

.main-container form:not(.is-dirty) .button-container:not(:has(.red, .check-green)) {
  display: none !important;
}

.main-container form.is-dirty .button-container .booking-btn {
  animation: fade-in-up .35s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-container .button-container .text-center.d-flex:has(.check-green) {
  display: flex;
  align-items: center;
  box-shadow: var(--floating-shadow);
  animation: none;
  min-height: 4.8rem;
  padding: 0 2.4rem;
  gap: .8rem;
  border-radius: 2.4rem;
  background-color: var(--softtec-dark-blue);
  color: var(--softtec-white);
  font-family: var(--font-medium);
  font-size: var(--font-size-14);
}

  .main-container .button-container .text-center.d-flex:has(.check-green) .check-green {
    display: none;
  }

  .main-container .button-container .text-center.d-flex:has(.check-green)::before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 1.4rem;
    animation: confirm-pop .45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

@media (max-width: 768px) {
  .main-container .button-container .text-center.d-flex:has(.check-green) {
    min-height: 4.4rem;
    padding: 0 2rem;
  }
}