body { margin: 0; padding-bottom: 80px; background: #ffffff; font-family: Arial, sans-serif; color: #333; }
header { background: #fcac00; padding: 16px; text-align: center; font-size: 1.4em; font-weight: bold; color: #000; }
#produtos { padding:10px; display:flex; flex-direction:column; gap:16px; max-width:600px; margin:auto; }
.produto { background:#fff; border-radius:12px; box-shadow:0 2px 6px rgba(0,0,0,0.1); display:flex; flex-direction:row-reverse; align-items:stretch; padding:12px; gap:16px; }
.produto-info { flex:1 1 auto; min-width:0; word-wrap:break-word; overflow-wrap:break-word; display:flex; flex-direction:column; }
.produto-info h2 { margin:0; font-size:1.1em; color:#161616; white-space:normal; }
.produto-info p { margin:6px 0; font-size:0.95em; color:#444; white-space:normal; }
.preco { font-weight:normal; color:#000; font-size:1em; margin-top:auto; margin-bottom:4px; }
.btn-add { margin:0; background-color:#27ae60; color:#fff; border:none; border-radius:6px; padding:10px; font-size:1em; width:100%; cursor:pointer; }
.btn-add:hover { background-color:#219150; }
.produto img { max-width:150px; max-height:220px; object-fit:contain; border-radius:8px; flex-shrink:0; align-self:flex-end; }

#barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  box-shadow: 0 -2px 6px rgba(121, 121, 121, 0.15);
  z-index: 998;
}

#barra-inferior button {
  flex: 1;
  padding: 5px 0;
  border: none;
  background: transparent;
  font-weight: normal;
  font-size: 0.85em;
  color: #333;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  position: relative; /* necessário para a barrinha */
}

#barra-inferior svg {
  width: 24px;
  height: 24px;
  fill: none;       /* ícones vazados */
  stroke: #333;
  stroke-width: 2;
  transition: stroke 0.2s;
}

#barra-inferior button.ativo svg {
  stroke: #ff7e21;  /* ícone ativo muda de cor */
}

#barra-inferior button.ativo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  background: #ff7e21;  /* barrinha amarela em cima */
  border-radius: 2px;
}

#barra-inferior span {
  font-size: 0.75em;
  color: #333;
}

#barra-inferior button.ativo span {
  color: #ff7e21; /* texto ativo também muda de cor */
}


.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 10000;align-items: flex-start; 
  padding-top: 0; padding-bottom: 60px; }
.modal-content {  padding-bottom: 60px; background: #fff; position: relative; z-index: 10001; max-height: 100vh; /* no máximo toda a altura da tela */
  min-height: 100vh; border-radius: 10px; padding: 20px; width: 100vw; max-width: 100vw; max-height: 80vh; overflow-y: auto; box-sizing: border-box; }


.fechar-btn { margin-top: 20px; width: 100%; background: #ff7e21; border: none; padding: 10px; border-radius: 6px; font-weight: bold; }
.fechar-botn { margin-top: 20px; width: 100%; background: #ff7e21; border: none; padding: 10px; border-radius: 6px; font-weight: bold; }
.hidden { display: none; }
.complemento-item { margin-bottom: 8px; }
body.tema-claro { background-color: #ffffff; color: #000000; }
body.tema-escuro { background-color: #121212; color: #f0f0f0; }
.card { background-color: inherit; color: inherit; }
.tema-claro h2 { color: #000000; }
.tema-escuro h2 { color: #000000; }
.tema-claro .titulo-categoria { color: #303030; }
.tema-escuro .titulo-categoria { color: #f0f0f0; }
#form-pedido.hidden { display: none !important; }
#form-pedido .modal-content {
  padding-bottom: 80px; /* deixe pelo menos a altura da barra inferior */
  background: #fff;
  width: 100%;
  height: 100vh; /* para ocupar toda a altura da tela */
  max-width: 100%;
  max-height: 100vh;
  box-sizing: border-box;
  padding: 20px 20px 80px 20px; /* padding inferior maior que a barra */
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* rolagem interna */
  border-radius: 0;
  position: relative;
  z-index: 10001;
}

#form-pedido h2 { margin: 0 0 20px 0; font-weight: 400; font-size: 1.6rem; color: #222; }
#form-pedido input, #form-pedido select, #form-pedido textarea { width: 100%; padding: 10px; margin: 5px 0 3px 0; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-weight: 400; box-sizing: border-box; }
#grupo-endereco { display: flex; gap: 10px; margin-bottom: 15px; }
#grupo-endereco input { flex: 1; }
#taxaEntrega { position: fixed; bottom: 60px; right: 10px; font-weight: normal; margin-top: 2px; font-size: 1.2rem; color: #000; padding: 6px 12px; border-radius: 6px; z-index: 9999; }
#totalComEntrega { position: fixed; bottom: 40px; right: 10px; font-weight: normal; margin-top: 2px; font-size: 1.2rem; color: #000; padding: 6px 12px; border-radius: 6px; z-index: 9999; }
#campoTroco label { display: block; margin-bottom: 5px; font-size: 1rem; color: #333; }
#campoTroco input { margin-top: 2px; }
#trocoCalculado { margin-top: 5px; color: green; font-weight: 400; }
.fechar-btn:hover { background-color: #fcac00; }
.pac-container { z-index: 20000 !important; }
#indice-categorias a { color: #333; transition: background-color 0.3s, color 0.3s; }
#indice-categorias a.ativa { background-color: #ffffff; color: white; font-weight: 70; }
h2.titulo-categoria { margin: 12px 0 8px; font-size: 1.1em; font-weight: 600; padding-bottom: 2px; border-bottom: 1px solid #eee; }
#indice-categorias span { white-space: nowrap; user-select: none; }
.link-categoria { position: relative; padding: 4px 6px; font-size: 13px; color: #444; text-decoration: none; transition: color 0.3s; }
.link-categoria.ativa { color: #fcac00 !important; }
.link-categoria.ativa::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #fcac00; border-radius: 2px; }
.destaques-container { padding: 16px 0; margin-bottom: 10px; }
.titulo-destaque { margin: 0 0 8px 10px; font-size: 1.2em; font-weight: bold; }
.destaques-lista { display: flex; overflow-x: auto; gap: 12px; padding: 0 10px; }
.prod-img {
  background: #f1f5f9;
}
.prod-img.is-loading {
  filter: blur(8px);
  transform: scale(1.02);
}
.prod-img.is-loaded {
  filter: none;
  transform: none;
  transition: filter .2s, transform .2s;
}

.item-destaque {
  width: 140px;          /* controla o tamanho do card */
  flex: 0 0 auto;
  text-align: center;
}

.item-destaque img {
  width: 100%;
  height: auto;          /* mantém proporção */
  border-radius: 12px;
  display: block;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

#modal-produto {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);

  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 0;
  
}

#modal-produto .modal-conteudo {
  background: #fff;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  padding: 0;
  box-sizing: border-box;
  z-index: 998;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  
}
.produto-info p {
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* Limita a 2 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botão fechar */
#fechar-modal-produto {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #000;
  cursor: pointer;
  z-index: 10;
}

/* Imagem ajustada para mostrar inteira */
#modal-produto-foto {
  width: 100%;
  height: 50vh;
  object-fit: contain;  /* ALTERADO para mostrar inteira */
  background: #f9f9f9; /* fundo neutro pra destacar a imagem */
  border-bottom: 1px solid #ddd; /* linha divisória */
  flex-shrink: 0;
}

/* Nome com linha divisória abaixo */
#modal-produto-nome {
  margin: 16px 20px 4px 20px;
  font-size: 1.5rem;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

#modal-produto-descricao {
  margin: 0 20px 8px 20px;
  color: #555;
  flex-grow: 1;
  overflow-y: auto;
  border-bottom: 1px solid #eee;
  padding-bottom: 12px;

  white-space: normal;      /* permite que o texto quebre linha */
  word-wrap: break-word;    /* quebra palavras longas se necessário */
  word-break: break-word;   /* também ajuda a quebrar linhas */
}

#modal-produto-footer {
  position: fixed;
  bottom: env(safe-area-inset-bottom, 0);
  left: 0;
  width: 100%;
  background: #fff;
  padding: 10px 16px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  gap: 16px;
}

#modal-produto-preco {
  margin: 0;
  font-size: 1.4rem;
  font-weight: bold;
  color: #000;
}

#modal-produto-adicionar {
  background: #27ae60;
  color: #fff;
  border: none;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  cursor: pointer;
  white-space: nowrap;
}
#complementos-container h4 {
  margin-top: 20px;
  font-weight: bold;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}
#complementos-container label {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
  margin-bottom: 6px;
}
.btn-add-pequeno {
  font-size: 12px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 10px;
  border-radius: 4px;

  background-color: #27ae60;
  color: white;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  transition: background-color 0.2s ease;
}

.btn-add-pequeno:hover {
  background-color: #27ae60;
}

.btn-add-pequeno:focus {
  outline: none;
  box-shadow: 0 0 0 2px #27ae60;
}
.fechar-modal-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  transition: color 0.2s ease;
  z-index: 10;
}

.fechar-modal-btn:hover {
  color: #ff6600; /* cor laranja no hover */
}
.choices {
  width: 250px; /* ou ajuste o tamanho que quiser */
  font-family: Arial, sans-serif;
  position: relative;
}

/* Container interno do Choices */
.choices__inner {
  min-height: 38px !important;
  padding: 6px 30px 6px 10px !important; /* espaço para seta */
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: none !important;
  position: relative;
}

/* Removendo seta padrão do Choices */
.choices__inner::after {
  content: none !important;
}

/* Criando seta inline com SVG ou CSS no span dentro do container */
.choices__inner .custom-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  color: #666;
  user-select: none;
}

/* Opcional: estilo dos itens selecionados */
.choices__item--selectable {
  padding: 6px 10px !important;
  line-height: normal !important;
}
.choices {
  width: 100%;
}
/* Dropdown */
.choices__list--dropdown {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 4px;
  border: 1px solid #ccc;
  margin-top: 2px;
}
body.modal-aberto {
  overflow: hidden;
  height: 100vh;
  position: fixed;
  width: 100vw;
}
.finalizar-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.finalizar-modal-content {
  background: #fff;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  overflow-y: auto;
  padding: 20px;
  padding-bottom: 120px; /* AQUI o espaço para os botões */
  box-sizing: border-box;
  z-index: 10001;
  border-radius: 0;
  position: relative;
}

.finalizar-modal-content input,
.finalizar-modal-content select,
.finalizar-modal-content textarea {
  width: 100%;
  padding: 10px;
  margin: 5px 0 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
}

.finalizar-cupom-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 15px;
}

#cupom {
  flex: 1;
  padding: 6px 8px;
  height: 36px;
  resize: none;
  font-size: 1rem;
}

#btnAplicarCupom {
  padding: 0 12px;
  background: #008000;
  color: white;
  border: none;
  border-radius: 4px;
  height: 36px;
  font-size: 0.9rem;
  cursor: pointer;
}

.finalizar-barra-inferior {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fcac00;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  z-index: 10002;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
}

.finalizar-barra-inferior button {
  flex: 1;
  padding: 12px 0;
  background: transparent;
  border: none;
  font-size: 0.95em;
  font-weight: bold;
  color: black;
  z-index: 10002;
}

.finalizar-barra-inferior i {
  font-size: 1.2em;
  display: block;
  margin-bottom: 4px;
}
#formaPagamento {
  margin-bottom: 80px;
}
body.no-scroll {
  overflow: hidden;
}
.modal-carrinho {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.modal-carrinho.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-carrinho-content {
  background: white;
  width: 100%;
  height: 95%; /* aumenta para quase toda a tela */
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px 20px 10px 20px; /* padding no topo para não grudar */
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
  position: relative;
}
#indice-categorias {
  height: 0;
  overflow: hidden;
  transition: height 0.25s ease;
}

#indice-categorias.visivel {
  height: 30px; /* altura real do índice */
}

.modal-carrinho.show .modal-carrinho-content {
  transform: translateY(0);
}

/* Botão fechar */
.modal-carrinho-content button.fechar-carrinho {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4d4d;
  border: none;
  color: white;
  font-size: 18px;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.finalizar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.finalizar-titulo {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 36px; /* igual ao botão */
}

.btn-voltar-header {
  background: #f1f1f1;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}

.btn-voltar-header:hover {
  background: #e5e5e5;
}

.btn-voltar-header svg {
  stroke: #000;
  display: block;
}/* Container do dropdown */
.pac-container {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid #ddd !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background-color: #fff !important;
  font-family: "Arial", sans-serif !important;
  font-size: 14px !important;
  z-index: 10000 !important;
  padding: 4px 0 !important;
}

/* Cada item do dropdown */
.pac-item {
  padding: 10px 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.2s ease !important;
  position: relative !important; /* necessário para ::before */
}

/* Hover suave */
.pac-item:hover {
  background-color: #f5f5f5 !important;
}

/* Ícone de localização via ::before */
.pac-item::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  flex-shrink: 0;
  background-image: url('https://cdn-icons-png.flaticon.com/512/2702/2702604.png'); /* ícone do Flaticon */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Remove o espaço invisível padrão do Google */
.pac-item .pac-icon {
  display: none !important;
}

/* Texto principal (endereço) */
.pac-item .pac-item-query {
  font-weight: 600 !important;
  color: #333 !important;
  display: block !important;
}

/* Texto secundário (bairro/cidade) */
.pac-item small {
  color: #777 !important;
  font-size: 12px !important;
  display: block !important;
  margin-top: 2px !important;
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .pac-container {
    max-height: 250px !important;
    font-size: 13px !important;
  }

  .pac-item::before {
    width: 18px;
    height: 18px;
  }
}