<style>
    /* Overlay de carregamento */
    #loaderOverlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.8);
      display: none; /* escondido por padrão */
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    .card.special-card {
        border: 1px solid #f59e0b; /* laranja/dourado chamativo */
        box-shadow: 0 0 5px rgba(245, 158, 11, 0.5); /* sombra suave laranja */
        /* transition: transform 0.2s; */
    }

    #loaderOverlay .spinner {
      border: 6px solid #e5e7eb;
      border-top: 6px solid var(--accent);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
  .btn-cardapio {
    background: var(--accent);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s;
  }
  :root{
    --bg:#fafafa; --panel:#fff; --muted:#6b7280; --text:#111827;
    --accent:#22c55e; --danger:#ef4444; --chip:#f3f4f6;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Inter,Arial}
  .wrap{max-width:1200px;margin:0 auto;padding:24px}
  .grid{display:grid;grid-template-columns:1fr 360px;gap:20px}
  @media (max-width:980px){.grid{grid-template-columns:1fr}}
  .panel{background:var(--panel);border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
  .panel .head{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1px solid #f3f4f6}
  .panel .body{padding:14px}
  .search{display:flex;gap:10px}
  .search input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
  .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .tab{padding:8px 12px;border-radius:999px;background:var(--chip);border:1px solid #e5e7eb;cursor:pointer}
  .tab.active{outline:2px solid var(--accent);background:rgba(34,197,94,.08)}
  .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  @media (max-width:760px){.list{grid-template-columns:1fr}}
  .card{background:#ffffffcc;border:1px solid #131516;border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center}
  .badge{font-size:12px;padding:3px 8px;border-radius:999px;background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
  .grow{flex:1}
  .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .muted{color:var(--muted)}
  .price{font-weight:700}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:10px;border:1px solid #e5ebe8;cursor:pointer;background:#fbfbfb}
  .btn.primary{background:var(--accent);color:#fff;border:0;padding:10px 14px}
  .btn.ghost{background:transparent}
  .btn.danger{background:var(--danger);color:#fff;border:0}
  .btn.icon{width:34px;height:34px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
  .qty{display:inline-flex;align-items:center;border-radius:10px;border:1px solid #e5e7eb;overflow:hidden}
  .qty button{width:36px;height:36px;border:0;background:#fff;cursor:pointer;font-weight:700}
  .qty input{width:44px;text-align:center;border:0;padding:6px;font-weight:700}
  .cart{position:sticky;top:16px}
  .cart .item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;}
  .cart .item .left{max-width:75%}
  .hint{font-size:12px;color:var(--muted)}
  .input{width:100%;padding:10px;border-radius:10px;border:1px solid #e5e7eb;background:#fff}
  dialog{border:1px solid #e5e7eb;border-radius:12px;background:#fff;color:var(--text);max-width:720px;width:96%}
  .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .chip{padding:8px 10px;border-radius:999px;border:1px solid #e5e7eb;cursor:pointer;background:var(--chip);font-size:14px}
  .chip.active{outline:2px solid var(--accent);background:#55bb7c70;font-weight: bold;}
  .small-note{font-size:12px;color:var(--muted);margin-top:6px}
  .cart-summary .row{display:flex;justify-content:space-between;margin:6px 0}
  .extra-highlight {
    color: #d35400;       /* laranja chamativo */
    font-weight: bold;    /* destaque */
  }
  .cart-obs {
    color: #d35400;       /* laranja chamativo */
    font-weight: bold;    /* destaque */
    /*
    width: 100%;
    border-radius: 8px;
    resize: vertical;
    font-size: 14px;
    */
  }

  
.actions {
  display: flex;
  gap: 8px;
}



.actions .btn.icon:hover {
  background: #eee;
}
.item {
  background-color:rgba(228, 228, 205, 0.212);
  vertical-align: top;
  border-radius: 10px;
  border: 1px solid #9999998f;
  
  margin-bottom: 5px;
  display: flex;
  
}
.left {
  flex: 1;
  text-align: left;
  /* margin: 18px; */
  padding: 8px;

}
.btn.icon {
  background: transparent;   /* fundo transparente */
  border: none;              /* sem borda */
  padding: 4px;              /* opcional: espaço em volta do ícone */
  cursor: pointer;           /* cursor de mãozinha */
  color: #333;               /* cor do ícone (usa stroke do SVG) */
}

.btn.icon:hover {
  color: #e63946; /* muda a cor ao passar o mouse (ex: vermelho) */
}

</style>