*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* background */
  --background-primary: #F4F5FB;
  --background-secondary: #FFFFFF;
  /* color */

  --color-brand: #CA3884;
  --color-brand-hover: #A52C6B;
  --color-danger: #C93847;
  /* content */
  --content-primary: #080B12;
  --content-secondary: #374151;
  --content-tertiary: #9CA3AF;
  --always-white: #FFFFFF;
  /* border */
  --border-primary: #D1D5DB;
  --border-hover: #B9C2D0;

  /* tipagem */
  --ff-sans: 'Inter', sans-serif;
  --h1: 700 1.5rem/2rem var(--ff-sans);
  --p: 500 1rem/1.25rem var(--ff-sans);
  --label: 600 1rem/1.25rem var(--ff-sans);
  --link: 500 0.875rem/1rem var(--ff-sans);
}

body {
  background-color: var(--background-secondary);
  font: var(--ff-sans);
}

.container {
  max-width: 627px;
  box-sizing: border-box;
  margin-inline: auto;
}

header {
  & span {
    display: block;
    color: var(--color-brand);

    margin-top: 62px;
    margin-bottom: 1rem;
  }

  & h1 {
    color: var(--content-primary);
    font: var(--h1);
  }
}

form {
  display: flex;
  margin-top: 2.75rem;
  margin-bottom: 2.5rem;

  & input {
    all: unset;
    background-color: var(--background-secondary);
    border: 3px solid var(--border-primary);
    border-radius: .75rem;
    font: 400 1rem/140% var(--ff-sans);

    margin-right: 1rem;
    padding-left: 1.125rem;

    width: calc(451px - 22px);
    height: 44px;


    &::placeholder {
      color: var(--content-tertiary);
      text-align: start;
    }

    &:hover {
      border-color: var(--border-hover);
    }
  }

  & input.empty-response {
    border-color: var(--color-danger);
  }

  & button {
    all: unset;
    background-color: var(--color-brand);
    color: var(--always-white);
    text-align: center;
    border-radius: .75rem;

    /* width: calc(); */
    width: 160px;
    height: 44px;

    margin-bottom: 2.5rem;

    &:hover {
      background-color: var(--color-brand-hover);
    }

  }

  input.empty-response {
    border-color: var(--color-danger);
  }
}

ul {
  display: flex;
  flex-direction: column;

  & li {
    all: unset;
    margin-bottom: .75rem;
    background-color: var(--background-primary);
    height: 49px;
    display: flex;
    gap: .75rem;
    align-items: center;
    padding-left: .75rem;

    border-radius: .75rem;

    width: calc(627px - 12px);

    & input[type='checkbox'] {
      all: unset;

      width: 14px;
      height: 14px;

      border: 1px solid var(--border-primary);
      border-radius: 5px;

      &:hover {
        border-color: var(--border-hover);
      }

      &:checked {
        background: var(--color-brand);
        border-color: var(--color-brand);
        background-image: url(/assets/icons/Vector.svg);
        background-repeat: no-repeat;
        background-position: center;
      }

    }

    & p {
      width: 531px;
      color: var(--content-secondary);
    }

    & a.excluir {
      background-image: url(assets/icons/delete.svg);
    }
  }
}


button.removed-item {
  all: unset;
  font: var(--label);
  gap: .5rem;

  color: var(--always-white);
  background-color: var(--color-danger);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: .75rem;
  margin-top: 2.25rem;
  margin-bottom: 137px;
  border-radius: .75rem;

  & p {
    width: 547px;
  }
}

button.disable {
  display: none;
}


.desktop-only {
  display: block;
  margin-inline: auto;
}

.mobile-only {
  display: none;
}

@media ((max-width: 390px) and (width < 700px)) {
  .container {
    margin: 2rem;
    width: 327px;
  }

  header {
    & span {
      margin-top: 34px;
    }
  }

  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }


  form {
    display: flex;

    & input {
      all: unset;
      background-color: var(--background-secondary);
      border: 3px solid var(--border-primary);
      border-radius: .75rem;
      font: 400 1rem/140% var(--ff-sans);
      padding-left: 1.125rem;
      /* width: 327px; */

      &::placeholder {
        color: var(--content-tertiary);
        text-align: start;
      }

      &:hover {
        border-color: var(--border-hover);
      }
    }

    & input.empty-response {
      border-color: var(--color-danger);
    }

    & button {
      all: unset;
      background-color: var(--color-brand);
      color: var(--always-white);
      text-align: center;
      border-radius: .75rem;

      /* width: 327px; */

      margin-bottom: 2.5rem;

      &:hover {
        background-color: var(--color-brand-hover);
      }

    }

    input.empty-response {
      border-color: var(--color-danger);
    }
  }



  button.removed-item {
    all: unset;
    font: var(--label);
    gap: .5rem;

    color: var(--always-white);
    background-color: var(--color-danger);

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    padding: .75rem;
    margin-top: 2.25rem;
    margin-bottom: 170px;
    border-radius: .75rem;

    & p {
      width: 247px;
    }
  }
  
  ul {
    display: flex;
    flex-direction: column;

    & li {
      all: unset;
      margin-bottom: .75rem;
      background-color: var(--background-primary);
      height: 57px;
      display: flex;
      gap: .75rem;
      align-items: center;
      padding-left: .75rem;

      border-radius: .75rem;
      /* justify-content: center; */

      width: calc(327px - 12px);

      & input[type='checkbox'] {
        all: unset;

        width: 1rem;
        height: 1rem;

        border: 3px solid var(--border-primary);
        border-radius: 6px;

        &:hover {
          border-color: var(--border-hover);
        }

        &:checked {
          background: var(--color-brand);
          border-color: var(--color-brand);
          background-image: url(/assets/icons/Vector.svg);
          background-repeat: no-repeat;
          background-position: center;
        }

      }

      & p {
        width: 231px;
        color: var(--content-secondary);
      }

      & a img {
        width: 32px;
        height: 32px;
      }
    }
  }

  button.disable {
    display: none;
  }



  footer {
    height: 2.75rem;
  }

  span {
    padding-top: 2.125rem;
    padding-bottom: 1rem;
  }

  h1 {
    margin-bottom: 2.75rem;
  }

  form {
    /* padding-block: 10rem; */
    display: flex;
    flex-direction: column;
    /* width: 100%; */

    & input {
      margin-bottom: 1rem;
      /* width: 100%; */
      height: 2.75rem;
    }

    & button {
      /* width: 327px; */
      height: 2.75rem;
    }
  }
}