/*
 * bondgarfo.css — v9
 * Mobile-first · Fibonacci spacing · Azul #003A70
 * Espaçamentos base: 8 / 13 / 21 / 34 / 55px
 */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #fff;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
}
a { color: #003A70; text-decoration: none; }
a:hover { color: #003A70; text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── Header principal (sticky) ── */
#bg-header-principal {
  position: sticky !important;
  top: 0;
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px;
  height: 72px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
#bg-header-principal img { height: 44px; width: auto; }

/* Logo restaurante 100×100 */
#bg-header-principal img[src*="logomarcas"],
#bg-header-principal img.logo-restaurante {
  width: 55px !important;
  height: 55px !important;
  border-radius: 8px;
  object-fit: contain;
}

/* Relógio */
#span_relogio_header {
  font-size: .78rem;
  font-weight: 700;
  color: #003A70;
  min-width: 55px;
  text-align: right;
}

/* ── Nav categorias (sticky abaixo do header) ── */
#nav-categorias {
  position: sticky !important;
  top: 72px;
  z-index: 899;
  background: #fff;
  border-bottom: 1px solid #eef0f4;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0 21px;
  scrollbar-width: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
#nav-categorias::-webkit-scrollbar { display: none; }
#nav-categorias a {
  display: inline-block;
  padding: 13px 13px;
  color: #444;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  letter-spacing: .02em;
}
#nav-categorias a:hover,
#nav-categorias a.ativo {
  color: #003A70;
  border-bottom-color: #003A70;
  text-decoration: none;
}
#nav-categorias a.opcao_inativa { color: #bbb !important; cursor: default; }

/* Status e relógio no nav */
#nav-status-loja {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  float: right;
  padding: 13px 0;
  font-size: .72rem;
  color: #555;
}
#nav-status-loja .status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #2e7d32;
  flex-shrink: 0;
}
#nav-status-loja .status-dot.fechado { background: #c62828; }

/* ── Oculta elementos legados ── */
#logobondgarfo, #faixa, #antesdetudo,
#area_menu_top, #span_relogio,
.cardapio_titulo, .sobrealoja, .textoloja,
td[width="196"], td[width="10px"] {
  display: none !important;
}

/* ── Layout principal ── */
#tudo, #trabalho {
  width: 100% !important;
  max-width: 100% !important;
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}
#bodypage {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 21px !important;
  background: #fff !important;
}
#tb1, table.areatotal {
  width: 100% !important;
  background: #fff !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Desktop: layout 2 colunas catálogo + carrinho ── */
@media (min-width: 768px) {
  /* Wrapper flex para catálogo + carrinho */
  .bd-layout {
    display: flex;
    align-items: flex-start;
    gap: 21px;
  }
  .bd-catalogo { flex: 1; min-width: 0; }
  .bd-carrinho-col {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 145px; /* header 72 + nav 73 */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }

  /* Coluna direita original — exibe como sidebar */
  td[width="232"] {
    display: table-cell !important;
    width: 280px !important;
    vertical-align: top;
    padding-left: 13px;
  }

  /* Esconde FAB e drawer em desktop */
  #btn-carrinho { display: none !important; }
  #drawer-overlay, #drawer-carrinho { display: none !important; }
}

/* ── Seção de categoria ── */
.cat-section { padding: 21px 0 8px; }
.cat-header {
  font-size: .88rem;
  font-weight: 700;
  color: #1a1a1a;
  padding-bottom: 8px;
  margin: 21px 0 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.subcat-header {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #888;
  margin: 13px 0 8px;
}

/* ── Grid de produtos ── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin-bottom: 21px;
}
@media (max-width: 480px) {
  .prod-grid { grid-template-columns: 1fr; }
}

/* Card */
.prod-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  text-decoration: none !important;
  color: #1a1a1a !important;
  transition: box-shadow .2s, transform .2s;
  background: #fff;
  cursor: pointer;
}
.prod-card:hover {
  box-shadow: 0 4px 20px rgba(0,58,112,.1);
  transform: translateY(-1px);
  text-decoration: none !important;
}
.prod-foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f5f5;
}
.prod-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.prod-foto-vazia {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ccc;
}
.prod-info {
  padding: 10px 13px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.prod-nome {
  font-size: .8rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
}
.prod-desc {
  font-size: .7rem;
  color: #777;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-preco {
  font-size: .88rem;
  font-weight: 700;
  color: #003A70;
  margin-top: auto;
  padding-top: 5px;
}

/* Botão pizza */
.prod-pizza-btn {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 8px;
}
.prod-pizza-btn a.comprar_botao {
  display: inline-block;
  background: #003A70;
  color: #fff !important;
  border-radius: 8px;
  padding: 10px 21px;
  font-weight: 700;
  font-size: .82rem;
  text-decoration: none !important;
}

/* ── Carrinho sidebar (desktop) ── */
td[width="232"] {
  vertical-align: top;
}
#cart-data {
  display: block !important;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 13px 16px 21px;
  box-shadow: 0 2px 16px rgba(0,58,112,.07);
}
.carr-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}
.carr-item:last-of-type { border-bottom: none; }
.carr-qty {
  background: #003A70;
  color: #fff;
  border-radius: 50%;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.carr-item-info { flex: 1; min-width: 0; }
.carr-item-nome { font-weight: 600; font-size: .78rem; display: block; }
.carr-item-det  { color: #888; font-size: .68rem; display: block; margin-top: 2px; }
.carr-item-preco { font-size: .72rem; color: #003A70; display: block; margin-top: 3px; }
.carr-excluir {
  color: #ccc; font-size: 14px; padding: 0 2px;
  text-decoration: none; flex-shrink: 0;
}
.carr-excluir:hover { color: #c62828; }
.carr-totais {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid #eef0f4;
}
.carr-linha {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: #555;
  padding: 3px 0;
}
.carr-total {
  font-weight: 700;
  font-size: .88rem;
  color: #1a1a1a;
  margin-top: 5px;
}
.carr-campo  { margin: 10px 0; }
.carr-label  { font-size: .68rem; color: #888; display: block; margin-bottom: 3px; }
.carr-select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: .78rem;
  font-family: Verdana, sans-serif;
  color: #1a1a1a;
  background: #fff;
}
.carr-finalizar {
  display: block;
  width: 100%;
  margin-top: 13px;
  padding: 13px;
  background: #003A70;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: .82rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.carr-finalizar:hover { background: #00285a; color: #fff; }
.carr-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 34px 13px;
  color: #bbb;
}
.carr-vazio-icon { font-size: 2rem; }
.carr-aviso { font-size: .75rem; color: #e53935; margin-top: 10px; }
.carr-msg   { font-size: .78rem; color: #888; padding: 21px 0; text-align: center; }

/* ── Modal produto ── */
#modal-produto-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 800;
  align-items: center;
  justify-content: center;
  padding: 13px;
}
#modal-produto-overlay.aberto { display: flex; }
#modal-produto {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
}
#modal-produto-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 21px;
  font-size: .85rem;
  font-weight: 700;
  color: #003A70;
  border-bottom: 1px solid #eef0f4;
}
#modal-produto-fechar {
  background: none; border: none;
  font-size: 1.4rem; cursor: pointer;
  color: #aaa; line-height: 1; padding: 0 4px;
}
#modal-produto-fechar:hover { color: #003A70; }
#modal-produto-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 34px; color: #aaa; font-size: .82rem;
}
#modal-produto-frame { flex: 1; border: none; min-height: 400px; }

/* ── FAB carrinho (mobile) ── */
#btn-carrinho {
  position: fixed;
  bottom: 21px; right: 21px;
  z-index: 700;
  background: #003A70;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px 21px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,58,112,.3);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s;
}
#btn-carrinho:hover { background: #00285a; }
.cart-count {
  background: #fff;
  color: #003A70;
  border-radius: 50%;
  width: 21px; height: 21px;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Drawer mobile ── */
#drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 800;
}
#drawer-overlay.aberto { display: block; }
#drawer-carrinho {
  position: fixed;
  bottom: -100%;
  left: 0; right: 0;
  height: 80vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  transition: bottom .25s ease;
  box-shadow: 0 -4px 30px rgba(0,0,0,.15);
}
#drawer-carrinho.aberto { bottom: 0; }
#drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 21px;
  font-size: .9rem;
  font-weight: 700;
  color: #003A70;
  border-bottom: 1px solid #eef0f4;
  flex-shrink: 0;
}
#drawer-fechar {
  background: none; border: none;
  font-size: 1.4rem; cursor: pointer;
  color: #aaa;
}
#drawer-body { flex: 1; overflow-y: auto; padding: 13px 21px 34px; }

/* ── Botões globais ── */
.finaliza_botao, .comprar_botao, .confirma_botao {
  background: #003A70 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 7px !important;
  padding: 8px 16px !important;
  font-weight: 700 !important;
  font-size: .78rem !important;
  cursor: pointer;
  display: inline-block;
  text-decoration: none !important;
  font-family: Verdana, sans-serif;
}
.finaliza_botao:hover,
.comprar_botao:hover,
.confirma_botao:hover { background: #00285a !important; }
.voltar_botao, .busca_botao {
  background: #f0f0f0 !important;
  color: #444 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 7px 13px !important;
  font-size: .78rem !important;
  cursor: pointer;
  font-family: Verdana, sans-serif;
}

/* ── Status da loja ── */
.loja_aberta  { color: #2e7d32; font-size: .72rem; font-weight: 600; }
.loja_fechada { color: #c62828; font-size: .72rem; font-weight: 600; }

/* ── Misc legado ── */
.opcao_ativa   { color: #003A70 !important; font-weight: 700; }
.opcao_inativa { color: #bbb !important; }
.tabpadrao_titulo {
  background: #003A70 !important;
  color: #fff !important;
  font-size: .75rem;
  font-weight: 700;
  padding: 5px 8px !important;
}
.tabpadrao_titulo_cinza {
  background: #f5f5f5 !important;
  color: #333 !important;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 8px !important;
}
.rodape { font-size: .68rem; color: #aaa; }
#span_relogio { font-size: .82rem; font-weight: 700; color: #003A70; }

/* ── Footer ── */
div[style*="background:#262220"] {
  background: #f8f9fb !important;
  color: #888 !important;
  border-top: 1px solid #eef0f4 !important;
}
div[style*="background:#262220"] a { color: #003A70 !important; }

/* ── Mobile geral ── */
@media (max-width: 767px) {
  #bg-header-principal { height: 55px; padding: 0 13px; }
  #bg-header-principal img { height: 34px; }
  #nav-categorias { top: 55px; padding: 0 13px; }
  #nav-categorias a { padding: 10px 10px; font-size: .7rem; }
  #bodypage { padding: 0 13px !important; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  td[width="232"] { display: none !important; }
  #cart-data { display: none !important; }
}
@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr; }
}