@use '../utilities';

form {
  .cf-row {
    .cf-col {
      margin-bottom: utilities.space(3);
    }
  }

  input,
  textarea,
  select {
    width: 100%;
    padding: utilities.space(2);
    border: 1px solid utilities.$primary;
    border-radius: 4px;
    font-size: 1.6rem;
    margin-top: utilities.space(1);

    &:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(utilities.$text-primary, 0.25);
    }
  }

  .cf-acceptance {
    margin: utilities.space(4) 0;

    .wpcf7-list-item {
      margin: 0;

      label {
        display: flex;
        align-items: start;

        input {
          margin-top: 0.2rem;
          width: 3rem;
          margin-right: 1rem;
        }
      }

      .wpcf7-list-item-label {
        font-size: 1.2rem;
      }
    }
  }
}

@media screen and (width >= 768px) {
  form {
    .cf-row {
      display: flex;
      margin-bottom: utilities.space(2);
      gap: utilities.space(2);

      .cf-col,
      .cf-col-full {
        flex: 1;
        margin-bottom: 0;
      }
    }
  }
}