@layer theme {
  :root {
    --color-brand: #00962D;
    --color-error: #b70000;
    --color-success: var(--color-brand);
    --color-button-bg: var(--color-brand);
    --color-button-fg: var(--color-brand);
  }
}

@layer app {
  html {
    opacity: 1;
  }

  main {
    padding-top: 130px;

    section.page {
      width: 100%;

      @media screen and (max-width: 620px) {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  .form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #00962D;
    gap: 0 !important;

    @media screen and (max-width: 620px) {
      grid-template-columns: repeat(1, 1fr);
    }


    @media screen and (min-width: 769px) and (max-width: 1024px) {
      grid-template-columns: repeat(1, 1fr);
    }

    .form__field {
      border-bottom: 1px solid #00962D;
      border-left: 1px solid #00962D;
      border-right: 1px solid #00962D;
      padding-top: 0.6rem;
      padding-left: 0.6rem;
      padding-bottom: 1.9rem;
      padding-right: 0.6rem;
      position: relative;
      height: 100%;
      margin: -1px;

      &:has(textarea) {
        grid-column: 1 / -1;
      }

      &:has(input:not([readonly]):focus, textarea:focus),
      &.has-value {
        label {
          display: none;
        }
      }

      &:nth-child(2n-1):not(:has(textarea)) {
        @media screen and (min-width: 621px) and (max-width: 768px) {
          border-right: none;
        }

        @media screen and (min-width: 1025px) {
          border-right: none;
        }
      }

      label {
        position: absolute;
        top: 0.6rem;
        left: 0.6rem;
        right: 0.6em;
        bottom: 0.6rem;
        color: #00962D;
      }

      input,
      textarea {
        border: none;
        padding: 0;
        color: #00962D;
      }
    }

    button[type="submit"] {
      margin-top: 2rem;
      padding-left: 4.75rem;
      padding-right: 4.75rem;
      background-color: transparent;
      color: #00962D;
      border: 1px solid #00962D;
      border-radius: 100px;
      height: 2.45rem;
      cursor: pointer;
      will-change: background-color, color;
      -webkit-transition: background-color 250ms
      cubic-bezier(0.25, 0.1, 0.25, 1), color 250ms
      cubic-bezier(0.25, 0.1, 0.25, 1);
      transition: background-color 250ms
      cubic-bezier(0.25, 0.1, 0.25, 1), color 250ms
      cubic-bezier(0.25, 0.1, 0.25, 1);
    }
  }

  .form-select {
    background: #F3F3F3;
    left: -1px;
    top: calc(100% + 1px);

    .form-select__option {
      color: #00962D;
    }
  }

  .form-calendar {
    --color-button-fg: white;
    background: #F3F3F3;
    color: #00962D;
  }
}