/* ══════════════════════════════════════════════════════════════════════════
   BASE VISUAL — compartilhada por site, conta, painel e plataforma
   ──────────────────────────────────────────────────────────────────────────
   As cores da marca NÃO ficam aqui: js/restaurante.js calcula e aplica as
   variáveis --c-primaria* e --c-escura* a partir das cores cadastradas do
   restaurante. Os valores abaixo são só o neutro antes de carregar.
   Formato "R G B" (sem vírgula) pra dar pra usar transparência: rgb(var(--x)/.5)
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --c-primaria:        28  25  23;
  --c-primaria-hover:  12  10   9;
  --c-primaria-suave: 245 245 244;
  --c-primaria-texto:  28  25  23;
  --c-sobre-primaria: 255 255 255;
  --c-escura:          28  25  23;
  --c-sobre-escura:   255 255 255;

  --c-fundo:          247 246 243;
  --c-superficie:     255 255 255;
  --c-linha:          231 229 225;
  --c-texto:           28  25  23;
  --c-texto-2:         87  83  78;
  --c-texto-3:        130 124 118;

  --c-checkout:        21 128  61;   /* botão "Fazer pedido" e total — vem de loja.cor_checkout */
  --c-checkout-hover:  18 110  52;
  --c-checkout-texto:  21 128  61;
  --c-sobre-checkout: 255 255 255;
  --c-oferta:         225  29  72;   /* destaque das promoções (selo -%, preço) */

  --c-sucesso:         21 128  61;
  --c-atencao:        180  83   9;
  --c-erro:           185  28  28;

  --raio: 14px;
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html{ -webkit-text-size-adjust:100%; }
/* "hidden" sempre esconde, mesmo com classe de layout (flex, grid…) no elemento */
[hidden]{ display:none !important; }
body{ font-family:var(--fonte); background:rgb(var(--c-fundo)); color:rgb(var(--c-texto)); }
input,textarea,select,button{ font-family:inherit; }
input,textarea,select{ font-size:16px; }                 /* evita zoom automático no iPhone */
@media (min-width:768px){ .painel input,.painel textarea,.painel select{ font-size:14px; } }
::selection{ background:rgb(var(--c-primaria)/.2); }
.num{ font-variant-numeric:tabular-nums; }

/* ── ícones (Google Material Symbols) ── */
.ms{
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  font-size:1.25em; line-height:1; letter-spacing:normal; text-transform:none;
  display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-smoothing:antialiased; font-feature-settings:'liga';
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:-0.2em; user-select:none; flex-shrink:0;
}
.ms.cheio{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }
.ms.leve { font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24; }

/* ── campos ── */
.campo{
  width:100%; background:rgb(var(--c-superficie)); color:rgb(var(--c-texto));
  border:1px solid rgb(var(--c-linha)); border-radius:10px; padding:.7rem .85rem;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.campo::placeholder{ color:rgb(var(--c-texto-3)); }
.campo:hover{ border-color:rgb(var(--c-texto-3)/.6); }
.campo:focus{ border-color:rgb(var(--c-primaria)); box-shadow:0 0 0 3px rgb(var(--c-primaria)/.18); }
.campo.erro{ border-color:rgb(var(--c-erro)); box-shadow:0 0 0 3px rgb(var(--c-erro)/.12); }
.campo:disabled{ background:rgb(var(--c-fundo)); color:rgb(var(--c-texto-3)); }
.rotulo{ display:block; font-size:.78rem; font-weight:600; color:rgb(var(--c-texto-2)); margin-bottom:.35rem; }
select.campo{ appearance:none; padding-right:2.2rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23827c76' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .65rem center; }

/* ── botões ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-weight:600; font-size:.9rem; line-height:1; border-radius:10px;
  padding:.8rem 1.1rem; border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .1s; white-space:nowrap;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn:focus-visible{ outline:3px solid rgb(var(--c-primaria)/.35); outline-offset:2px; }
.btn-primario{ background:rgb(var(--c-primaria)); color:rgb(var(--c-sobre-primaria)); }
.btn-primario:hover:not(:disabled){ background:rgb(var(--c-primaria-hover)); }
.btn-checkout{ background:rgb(var(--c-checkout)); color:rgb(var(--c-sobre-checkout)); }
.btn-checkout:hover:not(:disabled){ background:rgb(var(--c-checkout-hover)); }
.btn-escuro{ background:rgb(var(--c-texto)); color:#fff; }
.btn-escuro:hover:not(:disabled){ background:#000; }
.btn-contorno{ background:rgb(var(--c-superficie)); border-color:rgb(var(--c-linha)); color:rgb(var(--c-texto)); }
.btn-contorno:hover:not(:disabled){ border-color:rgb(var(--c-texto-3)); }
.btn-fantasma{ background:transparent; color:rgb(var(--c-texto-2)); }
.btn-fantasma:hover:not(:disabled){ background:rgb(var(--c-texto)/.05); color:rgb(var(--c-texto)); }
.btn-perigo{ background:rgb(var(--c-superficie)); border-color:rgb(var(--c-linha)); color:rgb(var(--c-erro)); }
.btn-perigo:hover:not(:disabled){ border-color:rgb(var(--c-erro)/.5); background:rgb(var(--c-erro)/.04); }
.btn-sm{ padding:.55rem .8rem; font-size:.8rem; border-radius:8px; }
.btn-icone{ padding:.55rem; border-radius:10px; }

/* ── superfícies ── */
.cartao{ background:rgb(var(--c-superficie)); border:1px solid rgb(var(--c-linha)); border-radius:var(--raio); }
.divisor{ border-top:1px solid rgb(var(--c-linha)); }
.selo{ display:inline-flex; align-items:center; gap:.25rem; font-size:.7rem; font-weight:600; line-height:1;
       padding:.3rem .5rem; border-radius:6px; white-space:nowrap; }

/* opção selecionável (entrega/retirada, pagamento, período…) */
.opcao{ display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; border-radius:12px; cursor:pointer;
        border:1px solid rgb(var(--c-linha)); background:rgb(var(--c-superficie)); transition:border-color .15s, background .15s; text-align:left; }
.opcao:hover{ border-color:rgb(var(--c-texto-3)/.7); }
.opcao.on{ border-color:rgb(var(--c-primaria)); background:rgb(var(--c-primaria-suave)); box-shadow:inset 0 0 0 1px rgb(var(--c-primaria)); }
.opcao .bolinha{ width:18px; height:18px; border-radius:99px; border:1.5px solid rgb(var(--c-texto-3)); flex-shrink:0; margin-left:auto; }
.opcao.on .bolinha{ border:5px solid rgb(var(--c-primaria)); }

/* segmentado (2-4 opções lado a lado) */
.segmentos{ display:flex; gap:4px; padding:4px; background:rgb(var(--c-texto)/.05); border-radius:12px; }
.segmentos > button{ flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem .5rem;
  border-radius:9px; font-size:.85rem; font-weight:600; color:rgb(var(--c-texto-2)); transition:background .15s,color .15s; }
.segmentos > button.on{ background:rgb(var(--c-superficie)); color:rgb(var(--c-texto)); box-shadow:0 1px 2px rgb(0 0 0/.08), 0 0 0 1px rgb(var(--c-linha)); }
.segmentos > button:disabled{ opacity:.45; cursor:not-allowed; }
.segmentos > button{ white-space:nowrap; }
.segmentos.rola{ display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; }
.segmentos.rola::-webkit-scrollbar{ display:none; }
.segmentos.rola > button{ flex:0 0 auto; padding:.55rem .85rem; }

/* chave liga/desliga */
.chave{ position:relative; width:2.4rem; height:1.4rem; border-radius:99px; background:rgb(var(--c-texto)/.18);
        transition:background .15s; cursor:pointer; flex-shrink:0; }
.chave::after{ content:''; position:absolute; top:.2rem; left:.2rem; width:1rem; height:1rem; border-radius:99px;
               background:#fff; transition:left .15s; box-shadow:0 1px 2px rgb(0 0 0/.25); }
.chave.on{ background:rgb(var(--c-sucesso)); }
.chave.on::after{ left:1.2rem; }
.chave:focus-visible{ outline:3px solid rgb(var(--c-primaria)/.35); outline-offset:2px; }
.chave:disabled{ opacity:.45; cursor:not-allowed; }

/* ── animações ── */
.surge{ animation:surge .22s cubic-bezier(.2,.8,.2,1); }
@keyframes surge{ from{ transform:translateY(12px); opacity:0 } to{ transform:none; opacity:1 } }
.desliza{ animation:desliza .26s cubic-bezier(.2,.8,.2,1); }
@keyframes desliza{ from{ transform:translateX(24px); opacity:0 } to{ transform:none; opacity:1 } }
.aparece{ animation:aparece .18s ease; }
@keyframes aparece{ from{ opacity:0 } to{ opacity:1 } }
.pisca{ animation:pisca 1s ease 2; }
@keyframes pisca{ 0%,100%{ background:transparent } 50%{ background:rgb(var(--c-primaria)/.14) } }
.esqueleto{ background:linear-gradient(90deg, rgb(var(--c-texto)/.05) 25%, rgb(var(--c-texto)/.09) 37%, rgb(var(--c-texto)/.05) 63%);
            background-size:400% 100%; animation:esq 1.4s ease infinite; border-radius:8px; }
@keyframes esq{ 0%{ background-position:100% 50% } 100%{ background-position:0 50% } }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

.sem-barra::-webkit-scrollbar{ display:none } .sem-barra{ scrollbar-width:none }
.linha-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* toast */
#toast{ position:fixed; left:50%; bottom:1.25rem; transform:translateX(-50%); z-index:90; max-width:min(92vw,420px);
        background:rgb(var(--c-texto)); color:#fff; font-size:.875rem; font-weight:500; padding:.8rem 1rem; border-radius:12px;
        box-shadow:0 10px 30px -10px rgb(0 0 0/.4); display:flex; align-items:center; gap:.6rem; }
#toast.erro{ background:rgb(var(--c-erro)); }
#toast[hidden]{ display:none; }