:root{
  --bg:#f5efe3;
  --card:#ffffff;
  --primary:#e6462d;
  --primary-dark:#c93c26;
  --text:#183c7d;
  --border:#d8cdb7;
  --muted:#666;
}

/* ------------------------------ */
/* ANIMAÇÃO CONTADOR */
/* ------------------------------ */

@keyframes flash-contador{
  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.25);
  }

  100%{
    transform:scale(1);
  }
}

.item-quantidade.flash{
  animation:flash-contador .25s ease;
}

/* ------------------------------ */
/* GERAL */
/* ------------------------------ */

*{
  box-sizing:border-box;
}

body{
  margin:0 auto;
  padding:20px;
  padding-top:80px;

  max-width:1000px;

  background:var(--bg);
  color:var(--text);

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

h2{
  margin-bottom:25px;
  text-align:center;
  color:var(--text);
}

/* ------------------------------ */
/* CATEGORIAS */
/* ------------------------------ */

#categorias{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-bottom:25px;
}

.cat-btn{
  background:#fff;
  color:var(--text);

  border:2px solid var(--border);

  border-radius:999px;

  padding:12px;

  font-weight:700;

  cursor:pointer;

  transition:.15s;
}

.cat-btn.ativo{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.cat-btn:hover{
  transform:translateY(-1px);
}

/* ------------------------------ */
/* CARDÁPIO */
/* ------------------------------ */

#cardapio{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.item{
  background:var(--card);

  border:1px solid var(--border);

  border-radius:18px;

  padding:14px 16px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.05);
}

.item-linha{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
}

.item-info{
  flex:1;
  min-width:0;
}

.item-nome{
  font-size:1rem;
  font-weight:700;
  color:var(--text);

  margin-bottom:5px;
}

.item-preco{
  color:var(--primary);
  font-weight:700;
}

.item-controles{
  display:flex;
  align-items:center;
  gap:10px;

  flex-shrink:0;
}

.item-quantidade{
  min-width:22px;

  text-align:center;

  font-size:1.2rem;
  font-weight:700;

  color:var(--text);
}

.item-btn{
  width:52px;
  height:52px;

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

  padding:0;

  border:none;
  border-radius:50%;

  background:var(--primary);
  color:#fff;

  font-size:1.8rem;
  font-weight:400;
  line-height:1;

  cursor:pointer;
}

.item-btn:hover{
  background:var(--primary-dark);
}

.item-total{
  margin-top:8px;

  font-size:.9rem;

  color:#777;
}

/* ------------------------------ */
/* RESUMO */
/* ------------------------------ */

#pedido{
  margin-top:35px;

  background:#fff;

  border:1px solid var(--border);

  border-radius:16px;

  padding:20px;
}

#pedido h3{
  margin-top:0;
}

#lista-pedido{
  list-style:none;
  padding:0;
}

#lista-pedido li{
  display:flex;
  gap:10px;
  margin:8px 0;
}

.qtd{
  width:40px;
  font-weight:bold;
}

.link-item{
  cursor:pointer;
  text-decoration:underline;
  color:var(--primary);
}

#btn-limpar{
  width:100%;
  margin-top:20px;
}

/* ------------------------------ */
/* BOTÕES */
/* ------------------------------ */

button{
  border:none;
  border-radius:10px;

  padding:12px 16px;

  cursor:pointer;

  font-weight:700;
}

/* ------------------------------ */
/* FINANCEIRO */
/* ------------------------------ */

.financeiro{
  background:#fff;

  border:1px solid var(--border);

  border-radius:16px;

  padding:20px;

  margin-top:20px;
}

.financeiro label{
  display:block;
  margin-bottom:15px;
}

.financeiro input{
  width:100%;

  padding:12px;

  margin-top:6px;

  border:1px solid #ccc;

  border-radius:10px;
}

.pagar-card{
  text-align:center;

  background:var(--primary);

  color:#fff;
}

.pagar-card #carregar{
  display:block;

  margin-top:8px;

  font-size:2.5rem;
  font-weight:900;
}

.troco-card{
  text-align:center;
}

.troco-card #troco{
  display:block;

  margin-top:8px;

  font-size:1.8rem;
  font-weight:700;
}

.resumo-caixa pre{
  margin:0;

  white-space:pre-wrap;

  font-family:monospace;
}

/* ------------------------------ */
/* STICKY BAR */
/* ------------------------------ */

#sticky-bar{
  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:100;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:10px 16px;

  background:#fff;

  border-bottom:1px solid var(--border);

  box-shadow:
    0 2px 10px rgba(0,0,0,.08);
}

#sticky-total-label{
  font-size:.8rem;
  font-weight:700;
}

#sticky-total-valor{
  color:var(--primary);

  font-size:1.4rem;
  font-weight:900;
}

#sticky-ver-resumo{
  background:var(--primary);
  color:#fff;
}

/* ------------------------------ */
/* MODAL */
/* ------------------------------ */

#modal-overlay{
  display:none;

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.5);

  z-index:200;

  align-items:center;
  justify-content:center;
}

#modal-overlay.ativo{
  display:flex;
}

#modal-box{
  background:#fff;

  width:90%;
  max-width:340px;

  padding:24px;

  border-radius:16px;

  text-align:center;
}

.modal-btns{
  display:flex;
  gap:10px;
}

.modal-btns button{
  flex:1;
}

#btn-confirmar-limpar{
  background:#e53935;
  color:#fff;
}

#btn-cancelar-limpar{
  background:#ddd;
}

/* ------------------------------ */
/* RODAPÉ */
/* ------------------------------ */

.rodape{
  margin-top:40px;

  text-align:right;

  color:#777;

  font-size:.8rem;
}

/* ------------------------------ */
/* DESKTOP */
/* ------------------------------ */

@media (min-width:700px){

  #categorias{
    grid-template-columns:
      repeat(5,1fr);
  }

}