*{
  margin:0;
  padding:0;
  box-sizing:border-box;

  font-family:
    Inter,
    Arial,
    sans-serif;
}

body{

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #111827,
      #1e293b
    );

  color:white;

  min-height:100vh;

  padding:30px;
}

/* =========================
   CONTAINER
========================= */

.container{

  width:100%;
  max-width:700px;

  margin:auto;

  background:
    rgba(255,255,255,0.06);

  backdrop-filter:
    blur(18px);

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:28px;

  padding:35px;

  box-shadow:
    0 20px 60px
    rgba(0,0,0,0.35);

  animation:
    fadeUp 0.4s ease;
}

h1{

  font-size:42px;

  margin-bottom:25px;

  font-weight:800;

  text-align:center;

  background:
    linear-gradient(
      90deg,
      #60a5fa,
      #818cf8
    );

  -webkit-background-clip:text;

  -webkit-text-fill-color:
    transparent;
}

h2{

  margin-bottom:18px;

  font-size:24px;

  font-weight:700;
}

/* =========================
   INPUTS
========================= */

.input,
select,
textarea{

  width:100%;

  padding:16px;

  margin-bottom:16px;

  border-radius:16px;

  border:none;

  background:
    rgba(255,255,255,0.08);

  color:white;

  font-size:15px;

  outline:none;

  transition:0.2s;
}

.input:focus,
select:focus,
textarea:focus{

  background:
    rgba(255,255,255,0.12);

  transform:
    scale(1.01);
}

input::placeholder,
textarea::placeholder{

  color:
    rgba(255,255,255,0.6);
}

/* =========================
   BOTÕES
========================= */

.btn{

  width:100%;

  padding:16px;

  border:none;

  border-radius:16px;

  background:
    linear-gradient(
      90deg,
      #3b82f6,
      #6366f1
    );

  color:white;

  font-size:16px;

  font-weight:700;

  cursor:pointer;

  transition:0.25s;

  margin-top:10px;
}

.btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 10px 25px
    rgba(59,130,246,0.35);
}

/* =========================
   STEPS
========================= */

.step{

  display:none;

  animation:
    fadeUp 0.3s ease;
}

.step.active{

  display:block;
}

/* =========================
   UPLOAD
========================= */

input[type="file"]{

  width:100%;

  padding:20px;

  border-radius:18px;

  border:
    2px dashed
    rgba(255,255,255,0.2);

  background:
    rgba(255,255,255,0.04);

  margin-bottom:20px;

  cursor:pointer;
}

#arquivosPreview{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin-top:10px;
}

.card{

  background:
    rgba(255,255,255,0.07);

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:18px;

  padding:18px;

  transition:0.25s;
}

.card:hover{

  transform:
    translateY(-2px);

  background:
    rgba(255,255,255,0.1);
}

/* =========================
   PIX
========================= */

img{

  border-radius:20px;

  margin-top:15px;

  background:white;

  padding:12px;
}

/* =========================
   ANIMAÇÕES
========================= */

@keyframes fadeUp{

  from{

    opacity:0;

    transform:
      translateY(20px);
  }

  to{

    opacity:1;

    transform:
      translateY(0);
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width:700px){

  body{

    padding:15px;
  }

  .container{

    padding:22px;

    border-radius:22px;
  }

  h1{

    font-size:32px;
  }
}
.hidden{
  display:none;
}

.menuGrid{

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(140px,1fr));

  gap:12px;

  margin-bottom:25px;
}

.menuBtn{

  padding:16px;

  border:none;

  border-radius:16px;

  background:
    rgba(255,255,255,0.08);

  color:white;

  cursor:pointer;

  font-weight:700;

  transition:0.2s;
}

.menuBtn:hover{

  background:
    rgba(255,255,255,0.14);
}

.section{

  display:none;
}

.section.active{

  display:block;
}

.cardPedido{

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius:18px;

  padding:18px;

  margin-bottom:15px;
}

.status{

  display:inline-block;

  padding:8px 14px;

  border-radius:999px;

  background:
    rgba(59,130,246,0.25);

  margin-top:10px;

  font-size:14px;
}

.listaItem{

  background:
    rgba(255,255,255,0.06);

  padding:14px;

  border-radius:14px;

  margin-bottom:10px;
}

.totalBox{

  margin-top:25px;

  padding:22px;

  border-radius:20px;

  background:
    rgba(255,255,255,0.08);

  display:flex;

  justify-content:space-between;

  align-items:center;

  font-size:22px;

  font-weight:700;
}