/* visual do cardapio digital (preview admin + pagina publica) Alex Adriano 08/07/2026 */

.menu-preview{background:#fff;border-radius:14px;width:100%;max-width:680px;overflow:hidden;box-shadow:0 16px 50px rgba(0,0,0,.4)}
.menu-header{padding:28px 24px 20px;text-align:center}
/* logo da loja (imglogoloja, 800x600 sem recorte): altura fixa, largura livre e contain p/ aproveitar a resolucao Alex Adriano 05/09/2026 */
.menu-logo{height:110px;width:auto;max-width:220px;border-radius:10px;object-fit:contain;margin:0 auto 10px;display:block}
.menu-logo-ph{width:110px;height:110px;border-radius:10px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:#fff;background:rgba(255,255,255,.2)}
.menu-name{font-size:24px;font-weight:800;margin-bottom:6px;color:#fff}
.menu-tagline{font-size:12px;margin-bottom:10px;color:rgba(255,255,255,.6)}
.menu-social{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.social-tag{font-size:10px;padding:3px 10px;border-radius:20px;text-decoration:none;font-weight:600}
/* divisor sem altura: a linha vazava abaixo do header e nao sumia pela cor (--dv tb pinta placeholder/bordas); elemento fica como ancora do cardapiomenu.js (ticket Cardapio Digital, Victor) Alex Adriano 28/10/2026 */
.menu-divider{height:0;margin:0 24px}
/* grupo com mais destaque + linha divisoria sutil (ticket Cardapio Digital, item 4) Alex Adriano 05/09/2026 */
.menu-section-lbl{padding:18px 8px 10px;margin:0 16px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;border-top:1px solid var(--dv)}
.menu-divider+.menu-secao>.menu-section-lbl{border-top:none}
/* navegacao horizontal por grupos no header (ticket, item 5): sticky na pagina publica, estatica no preview/pdf Alex Adriano 05/09/2026 */
/* grupos quebram em linhas p/ todos ficarem visiveis (no desktop nao da p/ rolar de lado, scrollbar escondida); so a barra fixa no celular fica em 1 linha rolavel Alex Adriano 22/09/2026 */
.menu-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;overflow-x:auto;padding:12px 16px 0;margin-top:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menu-nav::-webkit-scrollbar{display:none}
@media(max-width:600px){.menu-nav-fixa{flex-wrap:nowrap;justify-content:flex-start}}
.menu-nav a{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 12px;border-radius:20px;text-decoration:none;color:rgba(255,255,255,.75);background:rgba(255,255,255,.12);border:1px solid transparent;white-space:nowrap;transition:background .2s,color .2s}
.menu-nav a:hover{color:#fff;background:rgba(255,255,255,.22)}
.menu-nav a.ativo{color:#fff;background:var(--ac);border-color:rgba(255,255,255,.35)}
/* tema japones tem --ac igual ao header: pill ativo invertido p/ ficar visivel Alex Adriano 05/09/2026 */
.t-japones .menu-nav a.ativo{color:#1c1c1e;background:#fff}
.menu-nav-fixa{position:fixed;top:0;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:680px;z-index:5;background:var(--hd);padding:8px 16px;margin:0;box-shadow:0 2px 8px rgba(0,0,0,.25);box-sizing:border-box}
@media(max-width:480px){.menu-nav-fixa{width:calc(100% - 16px)}}
/* lupa de busca: botao fixo a esquerda e grupos numa faixa propria (so na pagina publica; o preview do admin nao tem a lupa) Alex Adriano 20/10/2026 */
.menu-nav.com-busca{flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;overflow:visible}
.menu-nav-grupos{position:relative;flex:1 1 0;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.menu-nav-grupos::-webkit-scrollbar{display:none}
@media(max-width:600px){.menu-nav-fixa .menu-nav-grupos{flex-wrap:nowrap;justify-content:flex-start}}
.menu-busca-btn{flex:0 0 auto;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.85);background:rgba(255,255,255,.12)}
.menu-busca-btn:hover,.menu-busca-btn.ativo{color:#fff;background:var(--ac);border-color:rgba(255,255,255,.35)}
.t-japones .menu-busca-btn.ativo{color:#1c1c1e;background:#fff}
.menu-busca{display:none;flex:0 0 100%;padding:2px 0 4px}
.menu-busca.aberta{display:block}
/* fonte de 16px: abaixo disso o iPhone da zoom ao focar o campo */
.menu-busca input{width:100%;box-sizing:border-box;font-size:16px;padding:8px 14px;border-radius:20px;border:none;outline:none;background:#fff;color:#1e293b}
.menu-busca-vazio{display:none;text-align:center;padding:32px 16px;font-size:13px;opacity:.6}
.menu-busca-vazio.visivel{display:block}
/* adicionais (modificadores) do produto: link no card + modal informativo; o overlay fica dentro do .menu-preview e herda o tema Alex Adriano 20/10/2026 */
.menu-item-card.tem-adic{cursor:pointer}
.menu-item-adic{display:inline-block;margin-top:5px;padding:0;border:none;background:none;font:inherit;font-size:11px;font-weight:700;cursor:pointer;color:var(--ac)}
.menu-item-adic:hover{text-decoration:underline}
.menu-adic-overlay{display:none;position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.menu-adic-overlay.aberto{display:flex}
.menu-adic-modal{position:relative;width:100%;max-width:440px;max-height:85vh;display:flex;flex-direction:column;border-radius:14px;background:var(--card);color:var(--tx);box-shadow:0 16px 50px rgba(0,0,0,.4)}
.menu-adic-fechar{position:absolute;top:8px;right:10px;width:32px;height:32px;border:none;border-radius:50%;background:rgba(0,0,0,.06);color:var(--tx);font-size:22px;line-height:1;cursor:pointer}
.menu-adic-conteudo{overflow-y:auto;padding:20px 20px 16px}
.menu-adic-titulo{font-size:17px;font-weight:800;padding-right:36px}
.menu-adic-preco-base{font-size:14px;font-weight:800;color:var(--pr);margin-top:4px}
.menu-adic-grupo{margin-top:16px}
.menu-adic-grupo-cab{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:var(--bg)}
.menu-adic-grupo-nome{font-size:13px;font-weight:800;color:var(--ac)}
.menu-adic-regra{font-size:11px;opacity:.7}
.menu-adic-opcoes{list-style:none;margin:0;padding:0}
.menu-adic-opcoes li{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;font-size:13px;border-bottom:1px solid var(--dv)}
.menu-adic-opcoes li:last-child{border-bottom:none}
.menu-adic-preco{white-space:nowrap;font-weight:700;color:var(--pr)}
.menu-secao{scroll-margin-top:60px}
.menu-items{padding:0 16px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.menu-item-card{border-radius:10px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.07)}
.menu-item-img{width:100%;height:100px;object-fit:cover;display:block}
.menu-item-img-ph{width:100%;height:100px;display:flex;align-items:center;justify-content:center;font-size:30px}
.menu-item-body{padding:9px 11px}
.menu-item-name{font-size:12px;font-weight:700;margin-bottom:3px}
.menu-item-desc{font-size:10px;opacity:.6;margin-bottom:5px;line-height:1.4}
.menu-item-price{font-size:14px;font-weight:800}
.menu-address{padding:12px 24px;text-align:center;font-size:12px;font-weight:600;opacity:.8;border-top:1px solid rgba(0,0,0,.07)}
.menu-footer-pdv{background:#003366;color:#fff;padding:9px 24px;text-align:center;display:flex;align-items:center;justify-content:center;gap:7px}
.pdv-badge{font-size:10px;font-weight:700;letter-spacing:.5px}
.pdv-dot{width:5px;height:5px;background:#2563eb;border-radius:50%;display:inline-block}
.menu-vazio{text-align:center;padding:32px 16px;opacity:.4;font-size:13px}

/* temas: variaveis de cor aplicadas pelo container .menu-preview */
.t-burger{--bg:#1a1a1a;--hd:#111;--tx:#e5e5e5;--ac:#e85d04;--card:#2a2a2a;--pr:#f59e0b;--dv:#333;--soc:rgba(255,255,255,.1);--soctx:rgba(255,255,255,.8)}
.t-acai{--bg:#f3e8ff;--hd:#4c1d95;--tx:#1e1b4b;--ac:#7c3aed;--card:#fff;--pr:#059669;--dv:#c4b5fd;--soc:rgba(124,58,237,.12);--soctx:#4c1d95}
.t-japones{--bg:#fafaf8;--hd:#1c1c1e;--tx:#1c1c1e;--ac:#1c1c1e;--card:#f5f5f3;--pr:#b45309;--dv:#e5e5e3;--soc:rgba(0,0,0,.07);--soctx:#1c1c1e}
.t-brasileiro{--bg:#fef3c7;--hd:#78350f;--tx:#451a03;--ac:#d97706;--card:#fff;--pr:#dc2626;--dv:#fde68a;--soc:rgba(217,119,6,.15);--soctx:#78350f}
.t-pdv{--bg:#f0f4ff;--hd:#003366;--tx:#1e293b;--ac:#2563eb;--card:#fff;--pr:#2563eb;--dv:#bfdbfe;--soc:rgba(37,99,235,.1);--soctx:#003366}
.t-cafe{--bg:#fdf6f0;--hd:#3b1f0a;--tx:#3b1f0a;--ac:#7c4b1e;--card:#fff8f3;--pr:#c2410c;--dv:#f4d3b2;--soc:rgba(124,75,30,.12);--soctx:#3b1f0a}
.t-pizza{--bg:#fffbf0;--hd:#7f1d1d;--tx:#1c1917;--ac:#dc2626;--card:#fff;--pr:#b45309;--dv:#fde68a;--soc:rgba(127,29,29,.1);--soctx:#7f1d1d}
.t-saudavel{--bg:#f0fdf4;--hd:#14532d;--tx:#14532d;--ac:#15803d;--card:#fff;--pr:#0d9488;--dv:#bbf7d0;--soc:rgba(21,128,61,.1);--soctx:#14532d}
.t-custom{--bg:#fff;--hd:#003366;--tx:#1e293b;--ac:#2563eb;--card:#fff;--pr:#2563eb;--dv:#e2e8f0;--soc:rgba(0,0,0,.07);--soctx:#1e293b}

.menu-preview{background:var(--bg)}
.menu-preview .menu-header{background:var(--hd)}
.menu-preview .menu-section-lbl{color:var(--ac)}
.menu-preview .menu-item-name{color:var(--tx)}
.menu-preview .menu-item-desc{color:var(--tx)}
.menu-preview .menu-item-price{color:var(--pr)}
.menu-preview .menu-item-card{background:var(--card)}
.menu-preview .menu-divider{background:var(--dv)}
.menu-preview .menu-address{color:var(--tx)}
.menu-preview .menu-item-img-ph{background:var(--dv)}
/* tags sociais ficam DENTRO do header (fundo --hd escuro): branco translucido garante contraste em qualquer tema Alex Adriano 08/07/2026 */
.menu-preview .social-tag{background:rgba(255,255,255,.18);color:#fff}
.menu-preview .menu-vazio{color:var(--tx)}
.menu-preview .menu-busca-vazio{color:var(--tx)}

@media(max-width:480px){
.menu-items{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;padding:0 10px 12px}
.menu-header{padding:20px 14px 14px}
.menu-name{font-size:20px}
.menu-logo{height:84px;max-width:170px}
.menu-section-lbl{font-size:13px;margin:0 10px;padding:14px 4px 8px}
}

/* impressao (export PDF via janela de impressao): cores preservadas e sem sombra Alex Adriano 08/07/2026 */
@media print{
.menu-preview{box-shadow:none;border-radius:0;max-width:100%}
.menu-preview,.menu-preview *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.menu-item-card{break-inside:avoid}
.menu-section-lbl{break-after:avoid}
/* barra de navegacao nao faz sentido no papel Alex Adriano 05/09/2026 */
.menu-nav{display:none}
/* adicionais so na tela Alex Adriano 20/10/2026 */
.menu-item-adic,.menu-adic-overlay{display:none!important}
}