/* A versão Pro dos esboços de take-away (2026-10-11).
   O Francisco: "em cima uma coisa grande … no básico os dias e as comidas, na
   versão Pro a encomenda com formulário e o backoffice para a cozinha".
   Por cima do molde da demo: usa as cores dela (--vw-marca, da camada premium)
   e não traz fontes próprias. Sem JavaScript fica o Básico, que é a página da
   demo tal como era — o interruptor só aparece quando o pro.js corre. */
[hidden]{display:none!important}
html:not(.vw-js) .vw-versoes{display:none}
html:not([data-versao="pro"]) .so-pro{display:none!important}
html[data-versao="pro"] .so-basico{display:none!important}

/* ---- o interruptor, no topo ---- */
.vw-versoes{position:relative;z-index:3;padding:18px 16px 20px;
  background:color-mix(in srgb,var(--vw-marca) 14%,transparent);color:inherit;
  border-bottom:1px solid color-mix(in srgb,var(--vw-marca) 25%,transparent)}
.vw-versoes-in{max-width:880px;margin:0 auto;display:grid;gap:10px;justify-items:center;text-align:center}
.vw-versoes p{margin:0;font:600 .72rem/1.2 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.75}
.vw-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;padding:6px;border-radius:22px;
  background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.vw-seg button{all:unset;box-sizing:border-box;cursor:pointer;min-height:64px;padding:10px 14px;border-radius:17px;display:grid;gap:2px;align-content:center;text-align:center;
  font:400 .8rem/1.3 system-ui,sans-serif;color:inherit;transition:background-color .35s cubic-bezier(.32,.72,0,1),color .35s,box-shadow .35s}
.vw-seg button b{font-size:1.15rem;letter-spacing:-.01em}
.vw-seg button small{font-size:.78rem;opacity:.8}
.vw-seg button[aria-pressed="true"]{background:var(--vw-marca);color:#fff;box-shadow:0 10px 26px -14px var(--vw-marca)}
.vw-seg button:focus-visible{outline:3px solid var(--vw-marca);outline-offset:3px}
.vw-seg button[data-versao="pro"] b::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.4em;border-radius:50%;
  background:currentColor;vertical-align:.18em;opacity:.7}
@media (min-width:700px){.vw-seg button small{font-size:.85rem}}

/* ---- a carta com quantidades ---- */
.vw-qt{display:inline-flex;align-items:center;gap:2px;margin-left:10px;flex:none;border-radius:999px;
  background:color-mix(in srgb,currentColor 7%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 14%,transparent)}
.vw-qt button{all:unset;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;font:700 1.25rem/1 system-ui,sans-serif}
.vw-qt button:focus-visible{outline:3px solid var(--vw-marca);outline-offset:-3px}
.vw-qt button[data-d="-1"]:disabled{opacity:.3;cursor:default}
.vw-qt output{min-width:1.4em;text-align:center;font:700 1rem/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.item.vw-tem .item-n{color:var(--vw-marca)}
/* esgotado hoje (marcado no painel): fica à vista, riscado, sem se poder escolher */
.item.vw-esgotado .item-n{text-decoration:line-through;opacity:.55}
.item.vw-esgotado .item-p{font-size:.85em;opacity:.8}
.item.vw-tem .vw-qt{background:var(--vw-marca);color:#fff;box-shadow:none}
/* a linha do prato tem de caber o botão a 360px: o pontilhado cede */
html[data-versao="pro"] #menu .item{align-items:center}
/* no telemóvel o −/+ ao lado do nome espremia-o em quatro linhas (e a Costeleta
   saía do ecrã, Belmonte 2026-10-11): desce para uma linha sua, à direita */
@media (max-width:640px){
  html[data-versao="pro"] #menu .item{flex-wrap:wrap;row-gap:0}
  html[data-versao="pro"] #menu .item::after{content:"";flex-basis:100%;order:2}
  html[data-versao="pro"] #menu .vw-qt{order:3;margin:6px 0 0 auto}
}

/* ---- a barra da encomenda (no lugar da barra de ações da demo) ---- */
html[data-versao="pro"] .barra{display:none!important}
.vw-carrinho{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto}
.vw-carrinho a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 10px 0 20px;border-radius:999px;
  background:var(--vw-marca);color:#fff;text-decoration:none;font:600 1rem/1.2 system-ui,sans-serif;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.vw-carrinho a span:last-child{padding:.55rem 1rem;border-radius:999px;background:rgba(255,255,255,.18)}
.vw-carrinho a:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ---- o formulário ---- */
#encomendar .vw-enc{display:grid;gap:22px}
@media (min-width:900px){#encomendar .vw-enc{grid-template-columns:1fr 1fr;gap:48px;align-items:start}}
.vw-caixa{padding:22px;border-radius:26px;background:color-mix(in srgb,currentColor 5%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,currentColor 10%,transparent)}
.vw-linhas{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vw-linhas li{display:flex;justify-content:space-between;gap:12px;font-size:1rem}
.vw-linhas li b{font-variant-numeric:tabular-nums}
.vw-total{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px dashed color-mix(in srgb,currentColor 25%,transparent);font-weight:700;font-size:1.1rem}
.vw-vazio{margin:0;opacity:.75}
.vw-linhas li.vw-extra{font-size:.88rem;opacity:.8}
.vw-form label.vw-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.vw-form label.vw-check input{width:22px;height:22px;min-height:0;accent-color:var(--vw-marca)}
.vw-form{display:grid;gap:14px}
.vw-form label{display:grid;gap:6px;font:600 .9rem/1.3 system-ui,sans-serif}
.vw-form label small{font-weight:400;opacity:.7}
.vw-form input,.vw-form select,.vw-form textarea{font:400 1rem/1.4 system-ui,sans-serif;min-height:48px;padding:10px 14px;border-radius:14px;
  border:1px solid color-mix(in srgb,currentColor 25%,transparent);background:Canvas;color:CanvasText;width:100%;box-sizing:border-box}
.vw-form textarea{min-height:80px;resize:vertical}
.vw-form input:focus-visible,.vw-form select:focus-visible,.vw-form textarea:focus-visible{outline:3px solid var(--vw-marca);outline-offset:1px}
.vw-form .vw-erro{margin:0;color:#b42318;font-weight:600}
.vw-enviar{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;min-height:54px;padding:0 1.4rem;border-radius:999px;
  background:var(--vw-marca);color:#fff;font:700 1.05rem/54px system-ui,sans-serif}
.vw-enviar:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.vw-letra{margin:0;font-size:.82rem;opacity:.75}
.vw-demo-nota{margin:0;padding:12px 16px;border-radius:16px;font-size:.88rem;line-height:1.5;
  background:#fff3c4;color:#4a3800;border:1px dashed #b38b00}
.vw-demo-nota a{color:inherit;font-weight:700}

/* ---- Básico: as ligações para o que só existe no Pro desaparecem ---- */
html:not([data-versao="pro"]) a[href="#reservar"],html:not([data-versao="pro"]) a[href="#encomendar"]{display:none!important}

/* ---- a carta rápida (molde da Casa Aurora) ---- */
.vw-carta{margin:0 0 22px;padding:18px 20px;border-radius:24px;background:color-mix(in srgb,currentColor 4%,transparent)}
.vw-carta .item{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 10%,transparent)}
.vw-carta .item:last-child{border-bottom:0}
.vw-carta .item-n{font-weight:600}
.vw-carta .pontilhado{flex:1;border-bottom:1px dotted color-mix(in srgb,currentColor 30%,transparent);min-width:6px}
.vw-carta .item-p{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  html[data-versao="pro"] .vw-carta .item{flex-wrap:wrap;row-gap:0}
  html[data-versao="pro"] .vw-carta .item::after{content:"";flex-basis:100%;order:2}
  html[data-versao="pro"] .vw-carta .vw-qt{order:3;margin:6px 0 0 auto}
}

/* ---- a reserva (take-away): quantas pessoas ---- */
.vw-pessoas{border:0;margin:0;padding:0}
.vw-pessoas legend{font:600 .9rem/1.3 system-ui,sans-serif;margin-bottom:8px}
.vw-chips{display:flex;flex-wrap:wrap;gap:8px}
.vw-chips button{all:unset;box-sizing:border-box;cursor:pointer;min-width:48px;min-height:48px;display:grid;place-items:center;border-radius:14px;
  border:1.5px solid color-mix(in srgb,currentColor 25%,transparent);font:700 1.05rem/1 system-ui,sans-serif}
.vw-chips button[aria-pressed="true"]{background:var(--vw-marca);border-color:var(--vw-marca);color:#fff}
.vw-chips button:focus-visible{outline:3px solid var(--vw-marca);outline-offset:2px}
#vw-estado-res{margin-top:16px}

/* ---- o painel da cozinha, em vídeo ----
   Não é o site do restaurante: é a demonstração para o dono. Por isso outra
   "matéria" — papel claro e quadriculado de caderno, moldura tracejada e um
   selo — para não se confundir com as secções do site (pedido dele, 2026-10-11). */
.vw-painel{position:relative;margin:28px 12px;border-radius:32px;color:#1c1b19;
  background:#f4f1ea;background-image:linear-gradient(rgba(28,27,25,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(28,27,25,.05) 1px,transparent 1px);
  background-size:22px 22px;outline:2px dashed rgba(28,27,25,.28);outline-offset:-10px}
@media (min-width:900px){.vw-painel{margin:40px auto;max-width:1240px}}
.vw-painel h2,.vw-painel p,.vw-painel li{color:#1c1b19}
.vw-painel h2 em{color:var(--vw-marca)}
.vw-so-dono{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;padding:6px 14px;border-radius:999px;
  background:#1c1b19;color:#fff!important;font:700 .78rem/1.3 system-ui,sans-serif}
.vw-so-dono::before{content:"";width:8px;height:8px;border-radius:50%;background:#ffd166}
.vw-painel-g{display:grid;gap:28px;align-items:center}
@media (min-width:960px){.vw-painel-g{grid-template-columns:1.35fr 1fr;gap:56px}}
/* a moldura de tablet: o vídeo lê-se como "isto está num aparelho", não como um anúncio */
.vw-tablet{margin:0;padding:12px;border-radius:30px;background:#16161a;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.75)}
.vw-tablet video{display:block;width:100%;height:auto;border-radius:18px;background:#e9e6df}
.vw-adeus{margin:0 0 14px;font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem);line-height:1.25;font-weight:800;letter-spacing:-.01em}
.vw-painel-lead{font-size:1.05rem;line-height:1.55;margin:0 0 18px}
.vw-pontos{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.vw-pontos li{position:relative;padding-left:28px;line-height:1.5}
.vw-pontos li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:4px;background:var(--vw-marca)}
.vw-painel .vw-enviar{display:inline-block}

/* ---- o estado do pedido, do lado do cliente ---- */
.vw-estado{padding:24px;border-radius:26px;display:grid;gap:12px;background:color-mix(in srgb,var(--vw-marca) 7%,transparent);
  box-shadow:0 0 0 2px var(--vw-marca),0 30px 60px -40px rgba(0,0,0,.6)}
.vw-estado h3{margin:0;font-size:1.35rem;line-height:1.25}
.vw-estado p{margin:0}
.vw-estado .vw-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0}
.vw-estado .vw-passos i{height:6px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent)}
.vw-estado .vw-passos i.ok{background:var(--vw-marca)}
.vw-estado .vw-acoes{display:flex;flex-wrap:wrap;gap:10px}
.vw-estado .vw-acoes a,.vw-estado .vw-acoes button{all:unset;box-sizing:border-box;cursor:pointer;min-height:46px;padding:0 1.1rem;border-radius:999px;
  display:inline-flex;align-items:center;font:600 .95rem/1 system-ui,sans-serif;box-shadow:inset 0 0 0 1.5px currentColor}
.vw-estado .vw-acoes .vw-p{background:var(--vw-marca);color:#fff;box-shadow:none}
.vw-estado .vw-acoes :focus-visible{outline:3px solid var(--vw-marca);outline-offset:2px}
.vw-estado[data-estado="recusado"]{box-shadow:0 0 0 2px #b42318}
.vw-espera{display:inline-flex;align-items:center;gap:.5rem}
.vw-espera::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--vw-marca)}
@media (prefers-reduced-motion:no-preference){
  .vw-espera::before{animation:vw-pulsa 1.4s ease-in-out infinite}
  @keyframes vw-pulsa{50%{opacity:.25}}
  .vw-estado{transition:box-shadow .4s}
}