:root {
--vermelho: #d63031;
--vermelho-hover: #b71c1c;
--azul: #183c7d;
--azulclaro: #3d6dc4;
--borda: #c8c0b0;
--fundo: #f5f0e8;
--fundoemoji: #e6ddcf;
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

button {
font-family: inherit;
cursor: pointer;
border: none;
outline: none;
background: transparent;
color: inherit;
-webkit-tap-highlight-color: transparent;
}

button:hover {
transform: none;
}

body {
font-family:
"Segoe UI",
system-ui,
-apple-system,
sans-serif;

background: var(--fundo);
color: #1a1a1a;

max-width: 700px;
margin: 0 auto;

padding-bottom: 10px;
}

a {
text-decoration: none;
}

/* ───────────────────────────── */
/* Sticky                        */
/* ───────────────────────────── */

#sticky-top {
position: fixed;
top: 0;
left: 0;
right: 0;

z-index: 100;

background: #fff;

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

#sticky-bar {

display: flex;
align-items: center;

gap: 10px;

padding: 10px 20px;

border-bottom: 1px solid #eee;

max-width: 700px;
margin: 0 auto;
}

#sticky-faq-btn {

flex-shrink: 0;

width: 45px;
height: 45px;

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

border-radius: 50%;

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

font-size: 2rem;
font-weight: 800;

text-decoration: none;

box-shadow:
0 2px 8px rgba(24,60,125,.45);
}

.sticky-total {
flex: 1;

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

gap: 8px;

min-width: 0;
}

#sticky-total-label,
#sticky-total-valor {
white-space: nowrap;
}

#sticky-total-valor,
#carregar {
  transition: transform .15s ease;
}

@keyframes total-flash {

  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }

}

.total-flash {
  animation: total-flash .25s ease;
  transform: scale(1.06);
}

#sticky-total-label {

font-size: .9rem;
font-weight: 700;

color: #888;
}

#sticky-total-valor {

font-size: 1.5rem;
font-weight: 800;

color: var(--vermelho);
}

#sticky-ver-resumo {

padding: 10px 15px;

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

border-radius: 12px;

font-size: .95rem;
font-weight: 700;

flex-shrink: 0;
}

#sticky-ver-resumo:hover {
background: var(--vermelho-hover);
}

#sticky-aviso {

max-width: 700px;
margin: 0 auto;

padding: 5px 16px 10px;

text-align: center;

color: #575757;

font-size: 1rem;
line-height: 1.4;

border-top: 1px solid #eee;
}

/* ───────────────────────────── */
/* Categorias                    */
/* ───────────────────────────── */

#categorias-wrapper {

padding: 10px 16px 10px;

max-width: 700px;
margin: 0 auto;
}

#categorias {

display: flex;
flex-wrap: wrap;

gap: 10px;

width: 100%;
}

.btn-categoria {

flex: 1 1 140px;

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

gap: 5px;

padding: 14px 16px;

border-radius: 12px;
border: 2px solid #ddd;

background: #fff;
color: #555;

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

white-space: nowrap;

transition:
border-color .15s,
background .15s,
color .15s;
}

.btn-categoria:hover {

border-color: var(--vermelho);

color: var(--vermelho);
}

.btn-categoria.ativo {

  background: var(--vermelho);

  border-color: var(--vermelho);

  color: #fff;

  box-shadow:
    0 0 0 3px rgba(214,48,49,.15),
    0 6px 16px rgba(214,48,49,.30);
}

/* ───────────────────────────── */
/* Cards de Produtos             */
/* ───────────────────────────── */

#cardapio {
padding: 0 10px;
margin-top: 12px;
}

.item {

display: flex;
align-items: center;

gap: 10px;

margin-bottom: 10px;
padding: 12px;

background: #fff;

border: 1px solid #f0ebe0;
border-radius: 16px;

box-shadow:
0 1px 4px rgba(0,0,0,.07);
}

.item:hover {

box-shadow:
0 3px 12px rgba(0,0,0,.12);
}

.item-emoji {

width: 50px;
height: 50px;

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

flex-shrink: 0;

background: var(--fundoemoji);

border-radius: 12px;

font-size: 2.5rem;
}

.item-info {

flex: 1;

min-width: 0;
}

.item-nome {

margin-bottom: 3px;

color: var(--azul);

font-size: 1.1rem;
font-weight: 600;

line-height: 1.3;
}

.item-desc {

color: #808080;

font-size: .78rem;
font-weight: 400;
}

.item-preco {

margin-top: 3px;

color: var(--vermelho);

font-size: .98rem;
font-weight: 700;
}

.item-controles {

display: flex;
align-items: center;

flex-shrink: 0;
}

/* ───────────────────────────── */
/* Botão Adicionar               */
/* ───────────────────────────── */

.btn-add {

width: 48px;
height: 48px;

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

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

border-radius: 50%;

font-size: 1.9rem;
line-height: 1;

box-shadow:
0 2px 10px rgba(214,48,49,.45);
}

.btn-add:hover {

background: var(--vermelho-hover);

transform: scale(1.08);
}

/* ───────────────────────────── */
/* Contador                      */
/* ───────────────────────────── */

.contador-wrap {

display: flex;
align-items: center;

gap: 4px;

padding: 4px 6px;

background: #fff3f3;

border: 2px solid var(--vermelho);
border-radius: 28px;
}

.btn-menos,
.btn-mais {

width: 35px;
height: 35px;

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

border-radius: 50%;

font-size: 1.4rem;
font-weight: 800;

line-height: 1;
}

.btn-menos {

background: #fff;

color: var(--vermelho);

border: 1.5px solid var(--vermelho);
}

.btn-mais {

background: var(--vermelho);

color: #fff;
}

.btn-menos:hover {

background: #ffeaea;

transform: scale(1.1);
}

.btn-mais:hover {

background: var(--vermelho-hover);

transform: scale(1.1);
}

.qtd-display {

min-width: 30px;

text-align: center;

color: var(--vermelho);

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

user-select: none;
}

/* ───────────────────────────── */
/* Animação                      */
/* ───────────────────────────── */

@keyframes flash-contador {

0% {
transform: scale(1);
}

35% {
transform: scale(1.35);
}

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

.qtd-display.flash {

animation:
flash-contador .22s ease-out;
}

/* ───────────────────────────── */
/* Resumo do Pedido              */
/* ───────────────────────────── */

#pedido {

margin: 30px 12px 0;
padding: 20px;

background: #fff;

border: 2px solid var(--borda);
border-radius: 16px;
}

#pedido h3 {

margin-bottom: 14px;

color: var(--azul);

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

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

#lista-pedido li {

display: flex;

gap: 10px;

margin: 8px 0;
}

.qtd {

width: 40px;

font-weight: bold;
}

.resumo-item {

text-align: left;

color: #333;
}

.link-item {

color: var(--vermelho);

text-decoration: underline;

cursor: pointer;

user-select: none;

touch-action: manipulation;

-webkit-tap-highlight-color: transparent;
}

/* ───────────────────────────── */
/* Limpar Pedido                 */
/* ───────────────────────────── */

#btn-limpar {

display: block;

width: 70%;

margin: 22px auto 0;
padding: 13px;

background: #fff8e1;

color: #b85c00;

border: 2px solid #ff9e80;
border-radius: 12px;

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

box-shadow:
0 2px 8px rgba(255,183,77,.25);

transition:
all .15s ease;
}

#btn-limpar:hover {

background: #ffe0b2;

border-color: #fb8c00;

transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(214,48,49,.20);
}

/* ───────────────────────────── */
/* Card Total                    */
/* ───────────────────────────── */

.financeiro {

margin: 14px 12px 0;
padding: 20px;

background: #fff;

border: 2px solid var(--borda);
border-radius: 16px;
}

.pagar-card {

padding: 22px 24px;

background: var(--vermelho);

border: none;
border-radius: 20px;

text-align: center;

box-shadow:
0 4px 20px rgba(214,48,49,.30);
}

.pagar-card strong {

display: block;

color: rgba(255,255,255,.90);

font-size: 1rem;

letter-spacing: .10em;

text-transform: uppercase;
}

.pagar-card #carregar {

display: block;

margin-top: 8px;

color: #fff;

font-size: 2.8rem;
font-weight: 900;

line-height: 1;

letter-spacing: -1px;
}

.subtitulo-carregar{

  display:block;

  margin-top:2px;
  margin-bottom:10px;

  font-size:.88rem;

  font-weight:600;

  color:rgba(255,255,255,.92);

  letter-spacing:.2px;

}

/* ───────────────────────────── */
/* Mensagem Final                */
/* ───────────────────────────── */

.mensagem-final {

margin: 24px 12px 0;
padding: 22px;

background: #fff;

border: 2px solid var(--borda);
border-radius: 16px;

text-align: center;

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

color: var(--azul);
}

/* ───────────────────────────── */
/* Modal                         */
/* ───────────────────────────── */

#modal-overlay {

position: fixed;
inset: 0;

display: none;

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

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

z-index: 999;
}

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

#modal-box {

width: min(90%, 360px);

padding: 24px;

background: #fff;

border-radius: 16px;

text-align: center;

box-shadow:
0 10px 30px rgba(0,0,0,.25);
}

#modal-box p {

margin-bottom: 20px;

color: #333;

font-size: 1rem;
line-height: 1.5;
}

.modal-aviso {
color: #aaa;
}

.modal-btns {

display: flex;

gap: 10px;
}

.modal-btns button {

flex: 1;

padding: 12px;

border-radius: 10px;

font-size: .95rem;
font-weight: 700;
}

#btn-cancelar-limpar {

background: #f2f2f2;

color: #555;
}

#btn-cancelar-limpar:hover {
background: #e6e6e6;
}

#btn-confirmar-limpar {

background: var(--vermelho);

color: #fff;
}

#btn-confirmar-limpar:hover {
background: var(--vermelho-hover);
}

/* ───────────────────────────── */
/* Rodapé                        */
/* ───────────────────────────── */

footer {

margin-top: 24px;

padding: 12px 12px 0;

text-align: center;

color: #666;
}

footer p {
margin-bottom: 10px;
}

footer a {

color: var(--azul);

text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}

.versao {

margin-top: 16px;

color: #888;

font-size: .80rem;
}

/* ───────────────────────────── */
/* Responsivo                    */
/* ───────────────────────────── */

@media (max-width: 600px) {

#sticky-bar {
padding: 10px 14px;
}

#sticky-faq-btn {
width: 40px;
height: 40px;
font-size: 1.5rem;
}

#sticky-total-label {
font-size: .85rem;
}

#sticky-total-valor {
font-size: 1.35rem;
}

#sticky-ver-resumo {
padding: 9px 12px;
font-size: .90rem;
}

#sticky-aviso {
padding: 5px 12px 9px;
font-size: .85rem;
}

.btn-categoria {
font-size: 1rem;
}

.item {
gap: 10px;
padding: 10px;
}

.item-emoji {
width: 50px;
height: 50px;
font-size: 2.4rem;
}

.item-nome {
font-size: .95rem;
}

.item-preco {
  font-size: 1.05rem;
  font-weight: 800;
}

.btn-add {
width: 44px;
height: 44px;
}

.btn-menos,
.btn-mais {
width: 34px;
height: 34px;
}

.qtd-display {
font-size: 1.25rem;
}

#pedido {
  margin: 30px 12px 0;
}

.financeiro {
margin-left: 10px;
margin-right: 10px;
}

.pagar-card #carregar {
font-size: 2.4rem;
}

#btn-limpar {
width: 80%;
}

.mensagem-final {
font-size: 1.05rem;
}
}