/* Brasa 77 - Cardapio + carrinho + checkout WhatsApp
   Escopo .b77c (grade na pagina) e .b77c-portal (modal/drawer/fab no body).
   Seletores de <button> levam o escopo na frente pra vencer o reset do tema
   Hello Elementor ([type=button]{border:1px solid #c36}). */

.b77c,
.b77c-portal {
  --bg:#0c0c0d; --bg-soft:#151516; --card:#161617; --line:#2b2b2c;
  --orange:#f5a623; --orange-deep:#e08a12; --red:#e8432f;
  --ink:#fff; --ink-soft:#b7b7b8; --ink-faint:#7a7a7c;
  --oswald:'Oswald',system-ui,sans-serif;
  --inter:'Inter',system-ui,sans-serif;
}
.b77c *, .b77c *::before, .b77c *::after,
.b77c-portal *, .b77c-portal *::before, .b77c-portal *::after { box-sizing:border-box; }

/* reset local de botoes (vence o tema por especificidade de escopo) */
.b77c button,
.b77c-portal button {
  margin:0; padding:0; border:0; background:none; color:inherit;
  font:inherit; line-height:1; cursor:pointer; border-radius:0;
  text-align:center; white-space:normal; transition:none;
}

/* ---------- grade de itens ---------- */
.b77c { font-family:var(--inter); color:var(--ink); }
.b77c-cat + .b77c-cat { margin-top:48px; }
.b77c-cat-titulo {
  font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  letter-spacing:1px; font-size:24px; color:var(--ink); margin:0 0 20px;
}
.b77c-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.b77c-card {
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease;
}
.b77c-card:hover { transform:translateY(-3px); border-color:#3a3a3b; }
.b77c-card-img { aspect-ratio:.85; background:#000; }
.b77c-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.b77c-card-body { padding:20px; display:flex; flex-direction:column; flex:1; }
.b77c-card-body h3 {
  font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:18px; letter-spacing:.4px; color:var(--ink); margin:0;
}
.b77c-card-body p { font-size:13px; line-height:1.5; color:var(--ink-faint); margin:8px 0 0; }
.b77c-card-foot {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:16px;
}
.b77c-price { font-family:var(--oswald); font-weight:600; font-size:18px; color:var(--orange); }
.b77c .b77c-add {
  width:34px; height:34px; border-radius:50%;
  background:var(--orange); color:#1a0f00; font-size:20px;
  font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease; flex-shrink:0;
}
.b77c .b77c-add:hover { background:var(--orange-deep); }

/* ---------- portal ---------- */
.b77c-portal { font-family:var(--inter); }

.b77c-portal .b77-fab {
  position:fixed; right:20px; bottom:20px; z-index:9998;
  display:flex; align-items:center; gap:10px; padding:14px 20px;
  background:var(--orange); color:#1a0f00; border-radius:999px;
  font-family:var(--oswald); font-weight:600; font-size:15px; letter-spacing:.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transform:translateY(160%); transition:transform .25s ease; visibility:hidden;
}
.b77c-portal .b77-fab.is-visible { transform:translateY(0); visibility:visible; }
.b77-fab-count {
  background:#1a0f00; color:var(--orange); border-radius:999px;
  min-width:22px; height:22px; padding:0 6px; display:flex;
  align-items:center; justify-content:center; font-size:12px;
}
.b77-fab-total { font-weight:700; }

.b77-overlay {
  position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.66);
  display:flex; opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.b77-overlay.is-open { opacity:1; pointer-events:auto; }

/* modal do item */
.b77-modal {
  margin:auto; width:min(460px,calc(100vw - 32px));
  max-height:calc(100vh - 48px); background:var(--bg-soft);
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; transform:translateY(16px);
  transition:transform .2s ease;
}
.b77-overlay.is-open .b77-modal { transform:translateY(0); }
.b77-modal-img { aspect-ratio:16/10; background:#000; position:relative; }
.b77-modal-img img { width:100%; height:100%; object-fit:cover; display:block; }
.b77c-portal .b77-x {
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  font-size:18px; display:flex; align-items:center; justify-content:center;
}
.b77-modal-scroll { overflow-y:auto; padding:20px; }
.b77-modal h3 {
  font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:20px; color:var(--ink); margin:0;
}
.b77-modal-desc { font-size:13px; color:var(--ink-faint); margin:6px 0 0; line-height:1.5; }

.b77-grupo { margin-top:22px; }
.b77-grupo-head {
  display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px;
}
.b77-grupo-nome {
  font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:13px; letter-spacing:.6px; color:var(--ink);
}
.b77-grupo-tag {
  font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-faint); border:1px solid var(--line); border-radius:4px; padding:2px 6px;
}
.b77-grupo-tag.req { color:var(--orange); border-color:var(--orange); }
.b77-opt {
  display:flex; align-items:center; gap:10px; padding:11px 12px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer;
  margin-bottom:8px; transition:border-color .12s ease, background .12s ease;
}
.b77-opt:hover { border-color:#3a3a3b; }
.b77-opt.is-on { border-color:var(--orange); background:rgba(245,166,35,.08); }
.b77-opt input { accent-color:var(--orange); width:16px; height:16px; flex-shrink:0; margin:0; }
.b77-opt-nome { flex:1; font-size:13.5px; color:var(--ink-soft); }
.b77-opt.is-on .b77-opt-nome { color:var(--ink); }
.b77-opt-preco { font-size:12.5px; color:var(--ink-faint); font-family:var(--oswald); }

.b77-obs { margin-top:22px; }
.b77-obs label {
  display:block; font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:13px; letter-spacing:.6px; color:var(--ink); margin-bottom:8px;
}
.b77c-portal .b77-field,
.b77c-portal textarea,
.b77c-portal select,
.b77c-portal input[type=text] {
  width:100%; background:var(--card); border:1px solid var(--line);
  border-radius:10px; color:var(--ink); font-family:var(--inter);
  font-size:13.5px; padding:10px 12px; resize:vertical;
}
.b77c-portal textarea { min-height:64px; }

.b77-qty { display:flex; align-items:center; gap:14px; margin-top:22px; }
.b77c-portal .b77-qty-btn {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.b77-qty-val { font-family:var(--oswald); font-weight:600; font-size:16px; min-width:22px; text-align:center; }

.b77-modal-foot, .b77-drawer-foot { padding:16px 20px; border-top:1px solid var(--line); background:var(--bg-soft); }
.b77c-portal .b77-cta {
  width:100%; border-radius:12px; background:var(--orange); color:#1a0f00;
  font-family:var(--oswald); font-weight:600; font-size:15px; letter-spacing:.5px;
  padding:14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:background .15s ease;
}
.b77c-portal .b77-cta:hover { background:var(--orange-deep); }
.b77c-portal .b77-cta[disabled] { opacity:.45; cursor:not-allowed; }
.b77c-portal .b77-cta.center { justify-content:center; }
.b77c-portal .b77-cta.ghost { background:transparent; border:1px solid var(--line); color:var(--ink-soft); }

/* drawer do carrinho */
.b77-overlay.drawer { justify-content:flex-end; }
.b77-drawer {
  width:min(400px,100vw); height:100%; background:var(--bg-soft);
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform:translateX(24px); transition:transform .2s ease;
}
.b77-overlay.is-open .b77-drawer { transform:translateX(0); }
.b77-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.b77-drawer-head h3 {
  font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:17px; letter-spacing:.6px; color:var(--ink); margin:0;
}
.b77c-portal .b77-drawer-head .b77-x { position:static; background:transparent; }
.b77-drawer-body { flex:1; overflow-y:auto; padding:16px 20px; }
.b77-empty { color:var(--ink-faint); font-size:14px; text-align:center; padding:40px 0; }

.b77-line { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.b77-line-main { flex:1; min-width:0; }
.b77-line-nome { font-family:var(--oswald); font-weight:600; text-transform:uppercase; font-size:13.5px; color:var(--ink); }
.b77-line-meta { font-size:11.5px; color:var(--ink-faint); margin-top:3px; line-height:1.45; }
.b77-line-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.b77-line-preco { font-family:var(--oswald); font-weight:600; font-size:13.5px; color:var(--orange); }
.b77-mini-qty { display:flex; align-items:center; gap:8px; }
.b77c-portal .b77-mini-qty button {
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.b77c-portal .b77-line-del { color:var(--ink-faint); font-size:11px; text-decoration:underline; margin-top:6px; }

.b77-row { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink-soft); margin:6px 0; }
.b77-row.total { font-family:var(--oswald); font-weight:600; font-size:16px; color:var(--ink); margin-top:12px; }

/* checkout */
.b77-co-field { margin-bottom:14px; }
.b77-co-field > label {
  display:block; font-family:var(--oswald); font-weight:600; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.6px; color:var(--ink-soft); margin-bottom:6px;
}
.b77-seg { display:flex; gap:8px; }
.b77-seg label {
  flex:1; text-align:center; border:1px solid var(--line); border-radius:9px;
  padding:9px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; position:relative;
}
.b77-seg input { position:absolute; opacity:0; pointer-events:none; }
.b77-seg label.is-on { border-color:var(--orange); background:rgba(245,166,35,.08); color:var(--ink); }
.b77-hint { font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
.b77-alert { font-size:12px; color:var(--red); margin-top:8px; line-height:1.5; }
.b77c-portal .b77-back { color:var(--ink-faint); font-size:12px; margin-bottom:12px; }

/* pilula "acompanhar pedido" - aparece quando o carrinho esta vazio e ha um pedido recente */
.b77c-portal .b77-track-pill {
  position:fixed; right:20px; bottom:20px; z-index:9998;
  display:flex; align-items:center; gap:9px; padding:13px 20px;
  background:#1a0f00; color:var(--orange); border:1px solid var(--orange);
  border-radius:999px; text-decoration:none;
  font-family:var(--oswald); font-weight:600; font-size:14px; letter-spacing:.5px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transform:translateY(160%); transition:transform .25s ease; visibility:hidden;
}
.b77c-portal .b77-track-pill.is-visible { transform:translateY(0); visibility:visible; }
.b77c-portal .b77-track-pill b { color:#fff; font-weight:700; }
.b77-track-ico { font-size:16px; line-height:1; }
@media (max-width:480px){
  .b77c-portal .b77-track-pill { left:16px; right:16px; justify-content:center; }
}

@media (max-width:1200px){ .b77c-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){ .b77c-grid { grid-template-columns:repeat(2,1fr); gap:16px; } .b77c-cat-titulo{ font-size:5.4vw; } }
@media (max-width:480px){
  .b77c-grid { grid-template-columns:1fr; }
  .b77-drawer { width:100vw; border-left:none; }
  .b77c-portal .b77-fab { left:16px; right:16px; justify-content:center; }
}