@import url('https://fonts.googleapis.com/css2?family=Allan:wght@400;700&family=Carattere&family=Ephesis&family=Libertinus+Mono&family=Monsieur+La+Doulaise&family=Quintessential&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Tangerine:wght@400;700&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: 'Space Grotesk';
  --box-shadow-default: 3px 3px 8px -2px rgba(0, 0, 0, 0.5);
  --dark-purple: hsl(278, 68%, 11%)
}

body {
  width: 100%;
  height: 100vh;

  main {
    height: 100%;

    background-image: url(../images/bg-main-desktop.png);
    background-repeat: no-repeat;
    background-position: start;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;

    section {
      width: 425px;
      height: 425px;

      &#cardPreview {
        position: relative;

        #frontView {
          width: 361px;
          height: 198px;
          border-radius: 8px;
          padding-block: 15px;
          padding-inline: 20px;
          box-sizing: border-box;

          position: absolute;
          top: 0;
          left: 0;

          background-image: url(../images/bg-card-front.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;

          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 12px;

          box-shadow: var(--box-shadow-default);

          #cardLogo {
            width: 100%;
            align-items: start;

            img {
              width: 70px;
            }
          }

          #cardNumber {
            width: 100%;
            color: white;
            font-size: 1.75rem;
            text-align: center;
            margin-top: 30px;
          }

          #nameDate {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;

            p,
            span {
              color: white;
            }
          }

        }

        #backView {
          width: 361px;
          height: 198px;
          border-radius: 8px;
          padding-block: 15px;
          padding-inline: 20px;
          box-sizing: border-box;

          position: absolute;
          bottom: 0;
          right: 0;

          background-image: url(../images/bg-card-back.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;

          box-shadow: var(--box-shadow-default);

          span {
            position: absolute;
            right: 40px;
            bottom: 90px;
            color: white;
            font-size: 1rem;
          }
        }
      }

      &#cardForm {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;

        div {
          width: 80%;

          h4 {
            margin-bottom: 7px;
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--dark-purple);

          }

          input {
            height: 30px;
            width: 100%;
            border-radius: 6px;
            border: 1px solid #d8d8d8;
            padding-left: 10px;
            box-sizing: border-box;

            &::placeholder {
              font-size: 0.875rem;
            }

            &:focus {
              border: 0;
              outline: 1px solid hsl(278, 94%, 30%);
            }

            &.erro {
              border: 1px solid red;
            }
          }

          &#dateCvc {
            display: flex;
            align-items: center;
            flex-direction: row;
            justify-content: center;
            gap: 15px;

            div {
              width: 100%;

              div {
                width: 100%;

                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: row;
                gap: 10px;
              }
            }
          }
        }

        button {
          all: unset;

          width: 80%;
          height: 40px;
          margin-top: 15px;
          border-radius: 6px;

          color: white;
          font-size: 1rem;
          text-align: center;

          cursor: pointer;
          background-color: var(--dark-purple);

          &:hover {
            background-color: hsl(278, 94%, 30%);
            transition: 400ms;
          }
        }
      }

      &#cardCompleted {
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 20px;

        img {
          width: 70px
        }

        h4 {
          font-size: 1.75rem;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: var(--dark-purple);
        }

        p {
          color: hsl(212, 12%, 71%);
        }

        button#btnConfirmSecondPage {
          all: unset;

          width: 80%;
          height: 40px;
          margin-top: 15px;
          border-radius: 6px;

          color: white;
          font-size: 1rem;
          text-align: center;

          cursor: pointer;
          background-color: var(--dark-purple);

          &:hover {
            background-color: hsl(278, 94%, 30%);
            transition: 400ms;
          }
        }
      }
    }
  }
}

@media (max-width:1000px) {

  body {
    main {
      section {
        #cardForm {
          width: 35%;

          div {
            h4 {
              margin-bottom: 5px;
              font-size: 0.625rem;
              letter-spacing: 1px;
            }
          }
        }

        #cardCompleted {
          width: 35%;
        }
      }
    }
  }
}

@media (max-width:800px) {
  body {
    main {
      background-image: url(../images/bg-main-mobile.png);
      background-repeat: no-repeat;
      background-position: start;
      background-size: contain;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 30px;

      section {
        height: 250px;
        width: 300px;

        &#cardPreview {
          height: 180px;

          #backView {
            width: 237px;
            height: 130px;
            top: 0;
            bottom: auto;
            right: 0;
            z-index: 1;

            span {
              position: absolute;
              right: 28px;
              top: 55px;
              font-size: 0.875rem;
            }
          }

          #frontView {
            width: 237px;
            height: 130px;

            position: absolute;
            bottom: 0;
            top: auto;
            left: 0;
            z-index: 2;

            #cardLogo {

              img {
                width: 40px;
              }

            }

            #cardNumber {
              font-size: 1rem;
              margin-top: 15px;
            }

            #nameDate {
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: baseline;

              p,
              span {
                color: white;
                font-size: 0.5rem;
              }
            }
          }
        }

        &#cardForm {
          width: 270px;
          height: 280px;


          div {
            width: 100%;

            h4 {
              margin-bottom: 5px;
              font-size: 0.625rem;
              letter-spacing: 1px;
            }

            input {
              height: 35px;
              border-radius: 7px;
              padding-left: 7px;

              &::placeholder {
                font-size: 0.75rem;
              }
            }
          }

          button {
            height: 40px;
            width: 100%;
            margin-top: 0px;
            border-radius: 6px;

            color: white;
            font-size: 0.75rem;
          }
        }

        &#cardCompleted {
          width: 270px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          gap: 15px;

          img {
            width: 50px
          }

          h4 {
            font-size: 1.5rem;
          }

          p {
            font-size: 0.875rem;
          }

          button#btnConfirmSecondPage {
            height: 40px;
            width: 100%;
            margin-top: 0px;
            border-radius: 6px;

            color: white;
            font-size: 0.75rem;
          }
        }
      }
    }
  }
}