/* =========================================================
🌈 TEMA CENTRAL (cores principais e ajustes rápidos)
========================================================= */

:root {
  /* === Cores de identidade === */
  --brand-purple: #cc13ca; /* Cor primária - usada em títulos, detalhes */
  --brand-pink: #a1728c; /* Cor secundária - botões, preços */

  /* === Fundo e texto === */
  --bg: #0f0f12; /* Fundo geral (fallback escuro) */
  --card: rgba(0, 0, 0, 0.2); /* Fundo dos cards e sacola */
  --stroke: rgba(0, 0, 0, 0.2); /* Bordas sutis */
  --text: #ffffff; /* Cor do texto padrão */
  --muted: #cfcfe3; /* Texto secundário */

  /* === Tons complementares === */
  --accent-yellow1: #cc13ca; /* Gradiente do botão flutuante */
  --accent-yellow2: #cc13ca;
}

/* =========================================================
🖼️ FUNDOS E TEXTURAS
========================================================= */

/* Corpo base */
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(
    2000px 1200px at 50% 50%,
    #febd59 0%,
    #febd59 55%,
    #febd59 100%
  );
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  z-index: 0; /* contexto base */
}

/* 🥔 Textura (sempre fixa, mas atrás de tudo) */
body::before {
  content: "";
  position: fixed; /* fixa durante o scroll */
  inset: 0;
  background: url("img/acai-textura-1.jpg") center/cover no-repeat;
  opacity: 0.8;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0; /* 🔽 fica abaixo da camada decorativa */
}

/* 🍟 Fundo decorativo (frutas, batatas, etc.) */
.fundo-decorativo {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* ✅ acima da textura */
  overflow: hidden;
}

/* =========================================================
  ✅ CSS CORRIGIDO DAS IMAGENS FLUTUANTES 
  =========================================================
*/
.fundo-decorativo img {
  position: absolute;
  opacity: 50;
  transform: rotate(var(--rot, 0deg));
  
  /* 👇 ISSO FAZ A MÁGICA 👇 */
  width: var(--size, 180px);    /* Pega a largura da variável */
  height: var(--size, 180px);   /* Pega a ALTURA da variável (ESSENCIAL) */
  border-radius: 50%;           /* DEIXA REDONDO */
  object-fit: cover;            /* Impede a imagem de achatar */
  /* 👆 FIM DA MÁGICA 👆 */

  filter: blur(1px);
  pointer-events: none;
  z-index: 1;
}

/* Posições */
.fundo-decorativo img:nth-child(1) {
  top: 5%;
  left: 6%;
  --rot: -15deg;
  --size: 220px;
}
.fundo-decorativo img:nth-child(2) {
  top: 70%;
  right: 10%;
  --rot: 20deg;
  --size: 180px;
}
.fundo-decorativo img:nth-child(3) {
  top: 35%;
  left: 65%;
  --rot: -10deg;
  --size: 160px;
}
.fundo-decorativo img:nth-child(4) {
  bottom: 8%;
  left: 12%;
  --rot: 12deg;
  --size: 200px;
}
/* 👇 Adicionei a 5ª imagem que você listou */
.fundo-decorativo img:nth-child(5) {
  top: 10%;
  right: 5%;
  --rot: 5deg;
  --size: 170px;
}
/* ========================================================= */


/* 🔝 Hierarquia visual (tudo acima do fundo) */
.brand-header,
section,
.sacola {
  position: relative;
  z-index: 5;
}
.btn-flutuante,
.modal {
  position: relative;
  z-index: 100;
}

/* =========================================================
🧠 FONTES E BASE
========================================================= */

@font-face {
  font-family: "ClafoutisTemp";
  src: url("font/ClafoutisTemp.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
a {
  color: var(--brand-pink);
  text-decoration: none;
}

/* =========================================================
🔝 HEADER E NAVEGAÇÃO (VERSÃO LIMPA E ÚNICA)
========================================================= */

.brand-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(204, 19, 202, 0.95);
  backdrop-filter: blur(1px);
  transition: all 0.3s ease;
  padding: 6px 0 !important; /* Mais fina */
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ✅ Espaço para o conteúdo não ficar coberto */
body {
  padding-top: 110px !important; /* Ajustado para novo header */
}

.brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px !important; /* Ajustado */
  transition: 0.3s ease;
}

.brand-logo {
  width: 90px !important; /* Ajustado */
  height: auto;
}

.brand-name {
  font-family: "ClafoutisTemp", "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem !important; /* Ajustado */
  color: #fff;
  margin: 0;
}

.brand-tag {
  font-size: 0.75rem !important; /* Ajustado */
  color: #000000;
  margin: 0;
}

/* Quando o usuário rolar pra baixo, esconde o topo */
.brand-header.minimized .brand-wrap {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 1. COMPORTAMENTO PADRÃO (DESKTOP) */
.brand-header nav {
  display: none; /* Removido */
}

/* =========================================================
📦 SEÇÕES E CATEGORIAS
========================================================= */

section {
  padding: 1.3rem 1rem 1.8rem;
  background: transparent;
  position: relative;
  z-index: 2;
}

h2 {
  font-family: "ClafoutisTemp", "Fredoka", system-ui, sans-serif;
  font-weight: 1000;
  text-align: center;
  font-size: 2.5rem;
  margin: 0 0 2rem;
  color: #000000;
  text-shadow: 0 2px 18px #ffffff73;
}

/* =========================================================
🧊 GRID DE PRODUTOS E CARDS (VERSÃO LIMPA E ÚNICA)
========================================================= */

.grid-produtos {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) inset;
}

/* Card individual */
.item {
  background: linear-gradient(
    180deg,
    rgba(35, 0, 50, 0.7) 0%,
    rgba(20, 0, 30, 0.9) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 0.9rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
  width: 100%;
  overflow: hidden;
}
.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);
}

/* 🔲 Mantém imagens sempre quadradas */
.item img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
  display: block;
}

.item h3 {
  font-family: "ClafoutisTemp", "Fredoka", system-ui, sans-serif;
  font-weight: 200;
  margin: 0.6rem 0 0.2rem;
  font-size: 1.15rem;
}

.item span {
  display: inline-block;
  margin-top: 0.25rem;
  background: var(--brand-pink); /* muda o fundo da etiqueta de preço */
  color: #120b12;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  font-weight: 900;
  font-size: 0.95rem;
}

.item .ver-detalhes,
.item .btn-abrir-modal /* Botão do Açaí */ {
  margin-top: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: none;
  border-radius: 10px;
  background: #2b2b2b;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.item .ver-detalhes:hover,
.item .btn-abrir-modal:hover {
  filter: brightness(1.08);
}

/* ❌ Remove qualquer regra antiga que voltava pra 1 coluna */
@media (max-width: 800px) {
  .grid-produtos {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =========================================================
🛍️ SACOLA / CARRINHO
========================================================= */

.sacola {
  background: var(--card);
  border: 1px solid var(--stroke);
  padding: 1rem;
  margin: 2rem auto;
  max-width: 980px;
  border-radius: 12px;
  z-index: 2;
}
.sacola h3 {
  margin: 0 0 0.6rem;
}

.sacola ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem;
}
.sacola li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #045f0412;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 8px;
}
.sacola .btn-remove {
  background: #750101;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-weight: 600;
  cursor: pointer;
}
.sacola .btn-remove:hover {
  filter: brightness(1.15);
}

#total-sacola {
  margin: 0.7rem 0 1rem;
}

.btn-primario,
.btn-whats {
  padding: 0.8rem 1.1rem;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.btn-primario {
  background: #8019af;
  color: #000000;
}
.btn-primario:hover {
  background: #940c60;
}
.btn-whats {
  background: #25d366;
  color: #111;
}
.btn-whats:hover {
  filter: brightness(1.05);
}

/* Botão flutuante (ANTIGO - escondido) */
.btn-flutuante {
  display: none !important;
}

/* Novo botão flutuante */
.btn-carrinho-novo {
  position: fixed;
  bottom: 25px;
  right: 20px;
  background: linear-gradient(90deg, #f04fff 0%, #bd08ae 100%);
  color: #222;
  font-weight: 900;
  border: none;
  border-radius: 50px;
  padding: 1rem 1.6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 1rem;
  cursor: pointer;
  z-index: 999999;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn-carrinho-novo:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.btn-carrinho-novo.hidden {
  display: none !important;
}

/* =========================================================
📋 MODAL ANTIGO (Batatas)
========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 14, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal[aria-hidden="false"] {
  display: flex;
}

.modal-content {
  background: #1b0f27; /* Corrigido */
  color: #fff;
  width: 100%;
  max-width: 420px; /* Corrigido */
  border-radius: 15px; /* Corrigido */
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  max-height: 90vh;
  overflow-y: auto;
  position: relative; /* Corrigido */
}

.modal img {
  width: 100%;
  max-height: 38vh;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 0.7rem;
}

.modal-actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  padding-top: 0.75rem;
  background: linear-gradient(180deg, transparent, rgba(22, 19, 27, 0.96) 40%);
}

/* Campo observação */
#modalObs {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  width: 100%;
  padding: 0.4rem 0;
  font-size: 1rem;
  outline: none;
  resize: none;
}
#modalObs::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Esconde opções de produto no card (só mostra no modal) */
.opcoes-produto {
  display: none;
}

/* ===== Adicionais dentro do modal (Batata) ===== */
.modal-opcoes {
  margin: 15px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.modal-opcoes label {
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.modal-opcoes input[type="checkbox"] {
  accent-color: var(--cor-principal, #b6a402);
}

.opcoes-modal {
  margin-top: 10px;
}
.opcoes-modal .extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  color: #fff;
  font-size: 15px;
}
.opcoes-modal .extra span:first-child {
  flex: 1;
  font-weight: 500;
}
.opcoes-modal .qtd-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
}
.opcoes-modal .qtd-control button {
  background: var(--cor-principal, #b18cff);
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: 0.2s;
}
.opcoes-modal .qtd-control button:hover {
  background: #9b70ff;
  transform: scale(1.1);
}
.opcoes-modal .qtd-control .qtd {
  width: 20px;
  text-align: center;
  font-weight: 600;
}
.opcoes-modal .extra .preco {
  margin-left: 10px;
  color: #ccc;
  font-size: 14px;
  white-space: nowrap;
}

/* =========================================================
💳 REVISÃO E PAGAMENTO
========================================================= */

/* ===== Botões de Entrega / Retirada ===== */
.tipo-entrega {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tipo-entrega .toggle-btn {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  border: 2px solid #7b1fa2;
  border-radius: 30px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  font-size: 0.95rem;
  background-color: transparent;
  color: #7b1fa2;
}
.tipo-entrega .toggle-btn input[type="radio"] {
  display: none;
}
.tipo-entrega .toggle-btn input[type="radio"]:checked ~ label,
.tipo-entrega .toggle-btn:has(input[type="radio"]:checked) {
  background-color: #7b1fa2;
  color: white;
}

/* 🚗 Campo de endereço */
.entrega {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entrega label[for="endereco"] {
  margin-bottom: 2px;
}
.entrega input#endereco {
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: none;
}
.endereco-linha {
  display: flex;
  gap: 8px;
  align-items: center;
}
.endereco-linha input {
  flex: 1;
}
.endereco-linha button {
  white-space: nowrap;
}

/* Opções de pagamento */
.pagamento-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}
.pagamento-opcoes label {
  background: #2a153b;
  color: white;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #7b1fa2;
  font-size: 14px;
  cursor: pointer;
}
.pagamento-opcoes input {
  margin-right: 6px;
}

/* Inputs e textareas da revisão (checkout) */
.entrega input,
.pagamento input[type="radio"],
#obsEntrega,
#valorTroco {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px;
  font-family: "Fredoka", sans-serif;
}
.entrega input:focus,
#obsEntrega:focus,
#valorTroco:focus {
  border-color: #a10ca7 !important;
  outline: none;
}
.pagamento label {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* 💵 Pop-up de troco */
#popupTroco {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  border-radius: 16px;
  padding: 25px;
  color: #fff;
  width: 85%;
  max-width: 320px;
  text-align: center;
  display: none; /* começa invisível */
  z-index: 9999;
}
#popupTroco .popup-content {
  background: #2a153b;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}
#popupTroco input {
  margin-top: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  outline: none;
  text-align: center;
  background: #1a0f25;
  color: #fff;
}
#popupTroco button {
  margin-top: 12px;
  width: 100%;
}

/* === CORREÇÃO LISTA REVISAR PEDIDO === */
#revisaoLista {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 24px;
}
#revisaoLista li {
  display: flex !important;
  align-items: center !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #2a153b;
  line-height: 1.4;
}
#revisaoLista li .li-info {
  text-indent: 0 !important;
  padding-left: 0 !important;
  margin-right: 10px; /* Espaço entre o nome e o preço */
}
#revisaoLista li span {
  text-indent: 0 !important;
}
#revisaoLista li button {
  margin-left: auto !important; /* Joga o botão para a DIREITA */
  flex-shrink: 0 !important; /* Impede o botão de "amassar" */
  background: #e53935;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#revisaoLista li button:hover {
  background: #c62828;
  transform: scale(1.05);
}

/* =========================================================
🎉 ANIMAÇÕES E TOASTS
========================================================= */

.toast {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: #1e1826;
  color: #fff;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  font-weight: 800;
  z-index: 100000;
  animation: toast-in 0.18s ease-out, toast-out 0.3s ease-in 1.7s forwards;
}
@keyframes toast-in {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toast-out {
  to {
    transform: translateY(10px);
    opacity: 0;
  }
}

.btn-flutuante.bump {
  animation: cart-bump 0.6s ease;
}
@keyframes cart-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.08);
  }
  60% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

.confirm-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #25d366;
  color: #111;
  font-weight: 900;
  font-size: 1.1rem;
  padding: 1rem 1.6rem;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 100000;
  opacity: 0;
  animation: popin 0.25s ease forwards, popout 0.4s ease 1.1s forwards;
}
@keyframes popin {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes popout {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

/* =========================================================
🛠️ ADMIN / MODERADOR
========================================================= */

/* 🧱 Área dos botões administrativos no rodapé */
.area-moderador {
  text-align: center;
  padding: 50px 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}
.area-moderador button {
  position: static !important;
  background: #fc94ee;
  color: #000;
  font-weight: 800;
  border-radius: 12px;
  padding: 12px 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.area-moderador button:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* 🔧 Botão de adicionais (fica um pouco diferente visualmente) */
#btnGerenciarAdicionais {
  background: #e873ff;
  color: #000;
  /* 🔒 Padrão: escondido e invisível */
  display: none !important;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 🟢 Quando ativa o modo moderador (senha correta) */
body.modoModerador #btnGerenciarAdicionais {
  display: inline-block !important;
  opacity: 1;
  pointer-events: auto !important; /* 👈 garante que seja clicável */
}

/* Efeito hover suave em TODOS os botões clicáveis */
button,
.btn-primario,
.btn-whats,
.btn-flutuante,
.modal-close,
.ver-detalhes {
  transition: all 0.2s ease-in-out;
}
button:hover,
.btn-primario:hover,
.btn-whats:hover,
.btn-flutuante:hover,
.modal-close:hover,
.ver-detalhes:hover {
  transform: scale(1.05);
  filter: brightness(0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* 🔒 Itens pausados (bloqueia cliques no card, mas mantém botão ativo) */
.item.pausado {
  opacity: 0.4;
  position: relative;
  pointer-events: none; /* bloqueia tudo */
}
.item.pausado::after {
  content: "⏸️ Indisponível";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 16px;
  pointer-events: none;
}
.item.pausado .btn-pausar {
  pointer-events: auto !important;
  z-index: 9999;
}

/* 🎛️ Botão admin flutuante sobre o item */
.item.editavel .btn-admin {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ff07c1;
  color: #000;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
  z-index: 5;
  transition: 0.2s;
}
.item.editavel .btn-admin:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Painel de Adicionais */
#painelAdicionais {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}
#painelAdicionais[aria-hidden="false"] {
  display: flex;
}
#painelAdicionais .modal-content {
  background: rgb(0, 0, 0);
  padding: 20px;
  border-radius: 10px;
  max-height: 80vh;
  overflow-y: auto;
}
#listaAdicionais li {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#listaAdicionais li span {
  font-weight: 600;
}
#listaAdicionais li button {
  padding: 5px 10px;
  border: none;
  background: #ff73f8;
  border-radius: 6px;
  cursor: pointer;
}

/* Adicionais Pausados */
.extra.pausado {
  opacity: 0.4;
  position: relative;
  pointer-events: none;
}
.extra.pausado::after {
  content: "⏸️ Indisponível";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 10px;
  z-index: 2;
}

/* =========================================================
🧊 NOVO MODAL (AÇAÍ BUILDER) - CSS ISOLADO (TEMA DARK)
========================================================= */

/* O fundo escuro (overlay) */
.acai-modal-container {
  display: none; /* Começa escondido */
  position: fixed; /* Fica por cima de tudo */
  z-index: 10000; /* Acima do modal antigo */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fundo preto semi-transparente */
  overflow-y: auto; /* Permite rolar se o modal for maior que a tela */
  justify-content: center;
  align-items: center;
}

/* Classe que o JavaScript vai adicionar para ABRIR o modal */
.acai-modal-container.aberto {
  display: flex;
}

/* A caixa (conteúdo) com o TEMA DARK */
.acai-modal-content {
  background-color: #1b0f27; /* 👈 SEU FUNDO DARK */
  color: #fff; /* 👈 SEU TEXTO BRANCO */
  border-radius: 8px;
  width: 90%;
  max-width: 600px; /* Limite de largura */
  max-height: 90vh; /* Limite de altura */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
}

/* Cabeçalho (Título e botão Fechar) */
.acai-modal-header {
  display: flex;
  /* justify-content: space-between; */ /* <-- Linha antiga comentada */
  justify-content: center; /* 👈 MUDAMOS PARA 'center' */
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative; /* 👈 ADICIONAMOS ISSO (Importante!) */
}
.acai-modal-header h2 {
  margin: 0;
  font-size: 1.4rem;
  color: #fff; /* 👈 TEXTO BRANCO */
}

/* Botão de fechar do Açaí */
.btn-fechar-modal {
  background: none;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  line-height: 1;

  /* 👇 ADICIONAMOS ESTAS 3 LINHAS 👇 */
  position: absolute; /* Tira ele do fluxo */
  top: 10px; /* Distância do topo */
  right: 15px; /* Distância da direita */
}
.btn-fechar-modal:hover {
  color: #fff;
}

/* Corpo (Onde ficam os steps) */
.acai-modal-body {
  padding: 10px 20px 20px 20px;
  overflow-y: auto; /* Permite rolar só o corpo */
  color: #fff; /* 👈 TEXTO BRANCO */
}
.acai-modal-body fieldset {
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
  border-radius: 6px;
  margin-bottom: 15px;
  padding: 10px 15px;
}
.acai-modal-body legend {
  font-weight: bold;
  padding: 0 5px;
  margin-left: 10px;
  color: #fff; /* 👈 TEXTO BRANCO */
}

/* Estilo de cada item de opção (radio ou checkbox) */
.acai-modal-body .opcao-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
  color: #fff; /* 👈 TEXTO BRANCO */
}
.acai-modal-body .opcao-item:last-child {
  border-bottom: none;
}
.acai-modal-body .opcao-item label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-left: 10px;
  cursor: pointer;
  color: #fff; /* 👈 TEXTO BRANCO */
}
.acai-modal-body .preco-opcao {
  font-weight: 500;
  color: #ccc; /* 👈 Cor sutil */
}
.acai-modal-body input[type="radio"],
.acai-modal-body input[type="checkbox"] {
  accent-color: var(--brand-purple); /* 👈 Usa sua cor principal */
}

/* Estilo das sugestões (Se você adicionar de volta) */
.sugestoes-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}
.sugestao-chip {
  background: rgba(255, 255, 255, 0.1); /* 👈 Fundo sutil */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
  border-radius: 20px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #fff; /* 👈 TEXTO BRANCO */
}
.sugestao-chip:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Rodapé (Quantidade e Preço Total) */
.acai-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
  background: #11091a; /* 👈 Um pouco mais escuro que o fundo */
  border-radius: 0 0 8px 8px;
}

/* Botão Adicionar do Açaí (AGORA ROXO) */
.btn-add-carrinho {
  background-color: var(
    --brand-purple,
    #8019af
  ); /* 👈 SUA COR ROXA PADRÃO */
  color: #000000; /* 👈 SEU TEXTO PRETO (igual .btn-primario) */
  border: none;
  border-radius: 10px; /* Igual .btn-primario */
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 800; /* Igual .btn-primario */
  cursor: pointer;
}
.btn-add-carrinho:hover {
  filter: brightness(1.1); /* 👈 Efeito hover padrão */
}

/* Controles de Quantidade (+ / -) no rodapé */
.acai-modal-footer .qtd-control {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 4px 10px;
  border-radius: 20px;
  color: #fff;
}
.acai-modal-footer .qtd-control button {
  background: var(--brand-purple, #8019af); /* 👈 SUA COR ROXA */
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: 0.2s;
}
.acai-modal-footer .qtd-control button:hover {
  filter: brightness(1.1);
  transform: scale(1.1);
}
.acai-modal-footer .qtd-control .qtd {
  width: 20px;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
}

/* ==============================================
   CSS DE IMPRESSÃO (COMANDA TÉRMICA) - VERSÃO FINAL (76mm)
   ============================================== */
@media print {
  
  /* 1. Define o tamanho da página como A4 (para "enganar" o navegador)
     e zera as margens da PÁGINA. */
  @page {
    size: 210mm;
    margin: 0mm !important; 
  }

  /* 2. Zera o corpo e o HTML à força.
     Define a largura do CORPO para 80mm, forçando a quebra de linha. */
  body, html {
    margin: 0 !important;
    padding: 0 !important;
    width: 80mm !important;
    height: auto !important;
    background: none !important;
  }

  /* 3. Esconde TUDO que não é a comanda */
  body > *:not(#comanda-impressao) {
    display: none !important;
    visibility: hidden !important;
  }

  /* 4. Força a comanda a colar no TOPO e na ESQUERDA da página A4 */
  #comanda-impressao {
    display: block !important;
    position: absolute !important; 
    top: 1mm !important;    /* COLA NO TOPO */
    left: 0mm !important;   /* COLA NA ESQUERDA */
    margin: 0 !important;
    padding: 0 !important; 
    
    /* 5. Define a largura real do conteúdo com margem de segurança */
    width: 70mm !important; /* 76mm (para 2mm de margem de cada lado) */
    
    font-family: "Courier New", Courier, monospace;
    color: #000;
    background: #fff;
    font-size: 10pt;
    word-wrap: break-word; /* Força o "enter" no texto */
  }
  
  /* --- O resto dos estilos (títulos, listas, etc.) --- */

  #comanda-impressao h3 {
    font-size: 12pt;
    text-align: center;
    border-bottom: 1px dashed #000;
    padding-bottom: 2mm;
    margin-bottom: 3mm;
    margin-top: 3mm; 
  }
  #comanda-impressao p {
    margin: 1mm 0;
    font-size: 9pt;
  }
  #comanda-impressao ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  #comanda-impressao li {
    display: flex;
    justify-content: space-between;
    font-size: 9pt;
    line-height: 1.4;
    border-bottom: 1px dotted #ccc;
    padding: 1mm 0;
    word-break: break-word;
  }
  #comanda-impressao li b {
    max-width: 80%;
  }
  #comanda-impressao li i {
    font-size: 8pt;
    display: block;
    width: 100%;
    margin-top: 0.5mm;
    color: #333;
  }
  #comanda-impressao li span {
    white-space: nowrap;
    text-align: right;
    margin-left: 5mm;
  }
  #comanda-impressao .comanda-total {
    font-size: 11pt;
    font-weight: bold;
    text-align: right;
    margin-top: 3mm;
    padding-top: 2mm;
    border-top: 1px dashed #000;
  }
  #comanda-impressao .comanda-info {
    font-size: 9pt;
    margin-top: 3mm;
    border-top: 1px dashed #000;
    padding-top: 2mm;
  }
  #comanda-impressao .comanda-info strong {
    display: block;
    margin-bottom: 1mm;
  }
  #comanda-impressao .comanda-info span {
    display: block;
    margin-bottom: 0.5mm;
  }
  #comanda-impressao p:last-of-type {
    text-align: center;
    font-size: 8pt;
    margin-top: 1mm;
    border-top: 1px dashed #000;
    padding-top: 2mm;
  }
}
/* ==============================================
   Centraliza o card "Monte seu Açaí" (Item Único)
   ============================================== */

/* 1. Identifica o grid DENTRO da seção #Acai-Pronto 
*/
#Acai-Pronto .grid-produtos {
  /* 2. Desliga o 'grid' e liga o 'flex' 
       (Usamos !important para sobrepor suas regras antigas)
  */
  display: flex !important;
  grid-template-columns: none !important; /* Desativa as colunas */

  /* 3. Centraliza o item no meio */
  justify-content: center;
  align-items: center;
}

/* 4. Define um tamanho para o card, 
     já que ele não está mais no grid 
*/
#Acai-Pronto .grid-produtos .item {
  width: 90%; /* Fica bom em celular */
  max-width: 450px; /* Limite de largura no PC */
  min-width: 300px; /* Limite mínimo */
  cursor: pointer; /* 👈 ADICIONE ESTA LINHA */
}

/* ==============================================
   CSS DO POP-UP "LOJA FECHADA"
   ============================================== */

#loja-fechada-overlay {
  position: fixed; /* Fica por cima de tudo */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Usa o seu fundo roxo escuro */
  background: rgba(27, 15, 39, 0.95); /* #1b0f27 com 95% de opacidade */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; /* Começa como 'none', o JS muda para 'flex' */
  align-items: center;
  justify-content: center;
  z-index: 999999; /* Mais alto que qualquer modal */
  color: white;
  text-align: center;
  padding: 20px;
}

.loja-fechada-content h1 {
  font-family: "ClafoutisTemp", "Fredoka", system-ui, sans-serif;
  color: white;
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  /* Garante que a cor do H2 não seja preta */
  color: #ffffff !important; 
}

.loja-fechada-content p {
  font-size: 1.2rem;
  color: #eee;
}