:root {
  --font-family: "Poppins", sans-serif;
  --text: 400 1rem/1.5 var(--font-family);
  --text-sm: 400 0.875rem/1.4 var(--font-family);

  --text-primary: #292524;
  --text-secundary: #57534e;
  --text-tertiary: #8f8881;
  --text-highlight: #e43a12;

  --surface-primary: #ffffff;
  --surface-secundary: #fee7d6;

  --stroke-default: #d6d3d1;
  --stroke-highlight: #f3541c;
  --semantic-error: #dc2626;
}

/* layout */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: var(--text);
  color: var(--text-secondary);
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1280px;
  margin-inline: auto;
}

#app {
  height: 100vh;
}

/* main */

main {
  background-color: var(--surface-primary);
  padding: 4rem;

  /* div back */
  #back {
    div {
      margin-bottom: 1.5rem;
    }

    h1 {
      font: 600 1.5rem/1.25 var(--font-family);
      margin-bottom: 0.5rem;
    }
  }

  /* form */
  form {
    margin-top: 3rem;

    fieldset {
      border: none;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      legend {
        font: 600 1rem/1.25 var(--font-family);
        margin-bottom: 1.5rem;
      }

      .droparea-wrapper {
        #dropzone {
          border: 1px dashed var(--stroke-default);
          border-radius: 4px;
          padding-block: 1.75rem;
          position: relative;

          img {
            width: 3rem;
            height: 3rem;
            margin-inline: auto;
            margin-bottom: 0.5rem;
          }

          p {
            text-align: center;
            color: #a8a29e;
            font: var(--text-sm);
          }

          input[type="file"] {
            position: absolute;
            width: 100%;
            height: 100%;
            inset: 0;
            opacity: 0;
            cursor: pointer;
          }
        }

        #dropzone:hover {
          border-color: var(--stroke-highlight);
          background-color: var(--surface-secundary);
        }
      }
    }

    /* campos de endereço */
    .adress {
      margin-top: 3rem;
    }

    /* campos de informações do responsável */
    .gardian {
      margin-top: 3rem;

      div small {
        font: var(--text-sm);
        color: #78716c;
        margin-top: 4px;
      }

      input {
        &[required] {
          border: 0.125rem solid var(--semantic-error);
        }

        &:valid + .error {
          display: none;
        }
      }

      .error span {
        color: var(--semantic-error);
        font: var(--text-sm);
      }
    }

    /* campos de opções de matrícula */
    .enroll-options {
      margin-top: 3rem;
      .input-wrapper {
        label {
          margin-bottom: 1rem;
        }

        #sport-fields {
          margin-bottom: 1rem;
        }
      }
    }

    /* input de radio dos campos de opções de matrícula */
    .radio-wrapper {
      .radio-inner {
        border: 1px solid var(--stroke-default);
        border-radius: 8px;
        flex: 1;
        padding: 2rem 1rem 1rem 1rem;
        justify-items: center;
        position: relative;

        & input,
        & input:focus,
        & input:hover {
          all: unset;
          position: absolute;
          inset: 0;
        }

        .radio-image {
          background-image: url("../assets/icons/circle.svg");
          width: 1.5rem;
          height: 1.5rem;
          position: absolute;
          top: 8px;
          left: 8px;
        }

        &:hover,
        &:focus-within {
          border: 1px solid var(--stroke-highlight);

          .radio-image {
            background-image: url("../assets/icons/circle-hover.svg");
          }
        }

        &:has(input:checked) {
          border: 2px solid var(--stroke-highlight);

          .radio-image {
            background-image: url("../assets/icons/checkmark-circle-01.svg");
          }
        }

        img {
          margin-bottom: 0.5rem;
        }

        label {
          color: #000000;
        }
      }
    }

    /* terms fields */
    .enroll-terms {
      margin-top: 3rem;

      div.checkbox-inner {
        position: relative;

        input {
          position: absolute;
          all: unset;
        }

        #checkbox-image {
          background-image: url("../assets/icons/square.svg");
          position: absolute;
          left: 0;
          width: 1.5rem;
          height: 1.5rem;
        }

        &:hover,
        &:focus-within {
          #checkbox-image {
            background-image: url("../assets/icons/square-hover.svg");
          }
        }

        &:has(input:checked) {
          #checkbox-image {
            background-image: url("../assets/icons/checkmark-square.svg");
          }
        }

        label {
          color: #57534e;

          span {
            color: #e43a12;
          }
        }
      }
    }
    /* buttons */
    .buttons-wrapper {
      margin-top: 3rem;
    }
    button {
      padding: 0.75rem 1.5rem;
      border: 1px solid var(--text-highlight);
      border-radius: 8px;

      &#btn-secundary {
        margin-left: auto;
        color: var(--text-highlight);

        &:hover {
          outline: #e43a12 solid 1px;
        }
      }

      &#btn-primary {
        background-color: #e43a12;
        color: white;

        &:hover {
          background-color: #f3541c;
        }
      }
    }
  }
}

input,
textarea,
select {
  width: 100%;
  color: var(--text-secundary);
  border: 1px solid var(--stroke-default);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
}

input:focus,
textarea:focus,
select:focus {
  border: 0.125rem solid var(--stroke-highlight);
  outline: 0.25rem solid var(--surface-secundary);
  outline-offset: 0.1px;
}

label {
  font: var(--text-sm);
  color: var(--text-secundary);
  margin-bottom: 4px;
  display: block;
}

/* aside */

aside {
  background-color: var(--surface-secundary);
  padding: 4rem;

  /* header */
  header {
    img#logo {
      margin-bottom: 0.5rem;
    }

    h2 {
      font: 600 2.5rem/1.25 var(--font-family);
      margin-bottom: 0.5rem;
      span {
        color: var(--text-highlight);
      }
    }

    p {
      margin-bottom: 2rem;
    }
  }
}