:root {
  --color-red: hsl(4, 100%, 67%);

  --color-blue-800: hsl(234, 29%, 20%);
  --color-blue-700: hsl(235, 18%, 26%);
  --color-grey: hsl(0, 0%, 58%);
  --color-white: hsl(0, 0%, 100%);

  --font-family: "Roboto", sans-serif;
  --font-size-body: 1rem;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  --layout-mobile: 375px;
  --layout-desktop: 1440px;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../assets/fonts/Roboto-Bold.ttf");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  background-color: var(--color-blue-700);
}

.sign-up {
  max-width: 56.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  background-color: var(--color-white);
  padding-bottom: 2.75rem;
  visibility: visible;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

  .image img {
    width: 100%;
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-inline: 1.5rem;

    .text-content {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      h1 {
        color: var(--color-blue-800);
        font-size: 3.5rem;
        font-weight: var(--font-weight-bold);
        line-height: 1;
        letter-spacing: 0;
      }

      p {
        color: var(--color-blue-800);
        font-size: 1rem;
        font-weight: var(--font-weight-regular);
        line-height: 1.5;
        letter-spacing: 0;
      }

      ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        li {
          display: flex;
          align-items: start;
          gap: 1rem;
          color: var(--color-blue-800);
          font-size: 1rem;
          font-weight: var(--font-weight-regular);
          line-height: 1.5;
          letter-spacing: 0;

          &::before {
            content: "";
            background: url("../assets/images/icon-list.svg");
            width: 1.3125rem;
            height: 1.3125rem;
          }
        }
      }
    }

    form {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;

      .form-field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;

        .error {
          display: flex;
          justify-content: space-between;

          p {
            color: var(--color-red);
            font-size: 0.75rem;
            font-weight: var(--font-weight-bold);
            line-height: 1.5;
            letter-spacing: 0;
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
          }

        }

        label {
          color: var(--color-blue-800);
          font-size: 0.75rem;
          font-weight: var(--font-weight-bold);
          line-height: 1.5;
          letter-spacing: 0;
        }

        input {
          padding: 1rem;
          border-radius: 0.5rem;
          border: 1px solid var(--color-grey);
          transition: all 0.2s ease-in-out;
        }

        input.error {
          color: var(--color-red);
          background-color: #FFE7E6;
          border: 1px solid var(--color-red);
        }
      }

      button {
        padding-inline: 3rem;
        padding-block: 1rem;
        background-color: var(--color-blue-800);
        color: var(--color-white);
        font-size: 1rem;
        font-weight: var(--font-weight-bold);
        line-height: 1.5;
        letter-spacing: 0;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        position: relative;
        isolation: isolate;
      }

      button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-image: linear-gradient(90deg,
            hsl(15deg 100% 61%) 0%,
            hsl(12deg 100% 63%) 8%,
            hsl(10deg 100% 64%) 17%,
            hsl(7deg 100% 65%) 25%,
            hsl(5deg 100% 66%) 33%,
            hsl(2deg 100% 67%) 42%,
            hsl(359deg 100% 68%) 50%,
            hsl(357deg 100% 67%) 58%,
            hsl(354deg 100% 67%) 67%,
            hsl(352deg 100% 67%) 75%,
            hsl(350deg 100% 66%) 83%,
            hsl(348deg 100% 66%) 92%,
            hsl(346deg 100% 66%) 100%);
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        z-index: -1;
      }

      button.active::before {
        opacity: 1;
      }

    }
  }
}

.sign-up.confirmed {
  visibility: hidden;
  opacity: 0;
  display: none;
}

.success {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16.4375rem;
  max-width: 31.5rem;
  background-color: var(--color-white);
  padding-inline: 1.5rem;
  padding-top: 9.375rem;
  padding-bottom: 4.375rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

  .image {
    width: 4rem;
    height: 4rem;

    img {
      width: 100%;
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    h1 {
      color: var(--color-blue-800);
      font-size: 2.5rem;
      font-weight: var(--font-weight-bold);
      line-height: 1;
      letter-spacing: 0;
    }

    p {
      color: var(--color-blue-800);
    }
  }

  button {
    padding-inline: 6.5rem;
    padding-block: 1rem;
    background-color: var(--color-blue-800);
    color: var(--color-white);
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.5;
    letter-spacing: 0;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
  }
}

.success.confirmed {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 40rem) {
  .sign-up {
    border-radius: 2.25rem;
    padding: 2.5rem;
  }

  .success {
    border-radius: 2.25rem;
    padding: 4rem;
    gap: 2rem;
  }
}

@media (min-width: 60rem) {
  .sign-up {
    flex-direction: row;
    align-items: center;
    padding: 2rem;

    .image {
      order: 1;
    }

    .content {
      padding: 0;
    }
  }

  .success {
    button {
      position: relative;
      isolation: isolate;
    }

    button::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background-image: linear-gradient(90deg,
          hsl(15deg 100% 61%) 0%,
          hsl(12deg 100% 63%) 8%,
          hsl(10deg 100% 64%) 17%,
          hsl(7deg 100% 65%) 25%,
          hsl(5deg 100% 66%) 33%,
          hsl(2deg 100% 67%) 42%,
          hsl(359deg 100% 68%) 50%,
          hsl(357deg 100% 67%) 58%,
          hsl(354deg 100% 67%) 67%,
          hsl(352deg 100% 67%) 75%,
          hsl(350deg 100% 66%) 83%,
          hsl(348deg 100% 66%) 92%,
          hsl(346deg 100% 66%) 100%);
      opacity: 0;
      transition: all 0.2s ease-in-out;
      z-index: -1;
    }
  }

  .success:hover {
    button::before {
      opacity: 1;
      box-shadow: 0 1rem 2rem 0 var(--color-red);
    }
  }
}