/*
  Design system da loja pública (camada 3) — visual com toques 3D,
  pedido do usuário em 19/09/2026, com o mockup "Chef Strigo Owl" como
  referência (paleta cerâmica/madeira/dourado + cards 3D + glow).

  3 temas prontos (pedido do usuário, mesmo dia): Escuro (original),
  Claro e Colorido — o restaurante escolhe em Aparência da Loja
  (`Loja.tema`). Tudo dirigido por variáveis CSS em `:root`/
  `body[data-tema="..."]`: as classes utilitárias Tailwind já usadas nos
  7 templates (bg-stone-950, text-white etc.) são "roteadas" pras
  variáveis logo abaixo, então trocar de tema é só trocar o VALOR das
  variáveis, sem precisar editar nenhum template. A cor de marca de cada
  restaurante (--brand-primary, vinda de Loja.cor_marca) continua sendo
  o acento configurável dentro de qualquer um dos 3 temas.

  Arquivo estático hand-authored (não passa pelo Tailwind CLI).
*/

:root {
    --gold: #f59e0b;
    --gold-light: #fcd34d;
    --wood: #78350f;
    --wood-dark: #451a03;

    /* Tema Escuro (padrão) */
    --bg-950: #0c0a09;
    --bg-900: #1c1917;
    --bg-800: #292524;
    --border-800: #292524;
    --border-700: #44403c;
    --text-primary: #f5f5f4;
    --text-secondary: #d6d3d1;
    --text-tertiary: #a8a29e;
    --text-quaternary: #78716c;
    --header-bg: rgba(12, 10, 9, .82);
    --header-bg-scrolled: rgba(12, 10, 9, .96);
    --blob-opacity: .22;
}

/* Tema Claro */
body[data-tema="claro"] {
    --bg-950: #fffbf5;
    --bg-900: #ffffff;
    --bg-800: #f5efe6;
    --border-800: #e7e0d4;
    --border-700: #d6ccb8;
    --text-primary: #1c1917;
    --text-secondary: #44403c;
    --text-tertiary: #78716c;
    --text-quaternary: #57534e;
    --header-bg: rgba(255, 255, 255, .85);
    --header-bg-scrolled: rgba(255, 255, 255, .97);
    --blob-opacity: .12;
}
body[data-tema="claro"] .text-glow { text-shadow: none; }
body[data-tema="claro"] .glass-header { border-bottom: 1px solid var(--border-800); }

/* Tema Colorido — gradiente terracota/vermelho, mais vibrante */
body[data-tema="colorido"] {
    --bg-950: #431407;
    --bg-900: #7c2d12;
    --bg-800: #9a3412;
    --border-800: #c2410c;
    --border-700: #ea580c;
    --text-primary: #fff7ed;
    --text-secondary: #fed7aa;
    --text-tertiary: #fdba74;
    --text-quaternary: #fb923c;
    --header-bg: rgba(67, 20, 7, .82);
    --header-bg-scrolled: rgba(67, 20, 7, .96);
    --blob-opacity: .3;
}
body[data-tema="colorido"] .loja-dark,
body[data-tema="colorido"] {
    background-image: radial-gradient(ellipse at top, #9a3412, #431407 70%);
}

/*
  Tema Personalizado (pedido do usuário, 19/09/2026): em vez de um dos 3
  temas prontos, o lojista escolhe 4 cores separadas — botões, bordas,
  menu e painel do produto — em Aparência da Loja. Base neutra igual ao
  tema Escuro (não inventa um 4º esquema de fundo do zero), só os 4
  pontos abaixo passam a vir das variáveis --cor-botoes/--cor-bordas/
  --cor-menu/--cor-painel-produto (setadas por template em `:root`, a
  partir de Loja.cor_botoes etc.) em vez de --brand-primary/--gold fixos.
  --brand-border é nova: usada só nos pontos "de borda" (ver mais
  abaixo), cai pra --brand-primary quando não definida (todo tema que
  não é o Personalizado nunca define --brand-border, então o
  comportamento de antes — borda usa a mesma cor do botão — continua
  idêntico nos outros 3 temas).
*/
body[data-tema="personalizado"] {
    --bg-950: #0c0a09;
    --bg-900: #1c1917;
    --bg-800: #292524;
    --border-800: #292524;
    --border-700: #44403c;
    --text-primary: #f5f5f4;
    --text-secondary: #d6d3d1;
    --text-tertiary: #a8a29e;
    --text-quaternary: #78716c;
    --blob-opacity: .22;
    --brand-primary: var(--cor-botoes, var(--gold));
    --brand-border: var(--cor-bordas, var(--cor-botoes, var(--gold)));
    --header-bg: color-mix(in srgb, var(--cor-menu, var(--bg-950)) 85%, transparent);
    --header-bg-scrolled: color-mix(in srgb, var(--cor-menu, var(--bg-950)) 97%, transparent);
}

/* "Painel do produto" — escopo só na página de detalhe do produto
   (ver produto_detalhe.html, classe .pagina-produto-detalhe no body),
   pra não recolorir .surface/.surface-raised usados em OUTRAS páginas
   (banner da vitrine, carrinho, checkout etc.) que não são "o painel do
   produto" que o usuário pediu pra customizar. */
body[data-tema="personalizado"].pagina-produto-detalhe .surface,
body[data-tema="personalizado"].pagina-produto-detalhe .surface-raised {
    background: var(--cor-painel-produto, var(--bg-900));
}

/*
  overflow-x:hidden fica no <html>, não no <body> — pedido do usuário,
  21/09/2026, bug real: a sacola flutuante da loja_publica.html
  (position: sticky) não acompanhava o scroll. Causa: overflow-x:hidden
  no <body> (aqui, pra esconder os blobs decorativos que vazam pra fora
  da tela) força o navegador, por regra de CSS (overflow-x/overflow-y
  são "pareados" — um não-visible força o outro a virar "auto" em vez
  de "visible"), a tratar o próprio <body> como um contêiner de
  rolagem novo. Isso muda o "containing block" de todo position:sticky
  dentro dele — deixa de rastrear o scroll real da página. Mesmo efeito
  visual (esconde o vazamento horizontal), sem esse efeito colateral.
*/
/* Este arquivo só é carregado nas páginas que usam body.loja-dark
   (ver cabeçalho do arquivo), então não precisa de seletor condicional
   aqui — o efeito já fica restrito a essas páginas pelo próprio <link>. */
html { overflow-x: hidden; }

body.loja-dark {
    background-color: var(--bg-950);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.loja-dark a { color: inherit; }

/* Roteia as classes utilitárias Tailwind já usadas nos templates pras
   variáveis de tema acima — assim os 7 templates não precisam saber que
   temas existem, só continuam usando bg-stone-950/text-white/etc. */
.loja-dark .bg-stone-950 { background-color: var(--bg-950) !important; }
.loja-dark .bg-stone-900, .loja-dark .bg-white { background-color: var(--bg-900) !important; }
.loja-dark .bg-stone-800 { background-color: var(--bg-800) !important; }
.loja-dark .border-stone-800, .loja-dark .border-stone-950 { border-color: var(--border-800) !important; }
.loja-dark .text-white { color: var(--text-primary) !important; }
.loja-dark .text-stone-200, .loja-dark .text-stone-300 { color: var(--text-secondary) !important; }
.loja-dark .text-stone-400, .loja-dark .text-stone-500 { color: var(--text-tertiary) !important; }
.loja-dark .text-stone-600, .loja-dark .text-stone-700, .loja-dark .text-stone-900 { color: var(--text-quaternary) !important; }

/* ---- Perspectiva/3D ---- */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; }

.card-3d {
    transition: transform .5s cubic-bezier(.25, 1, .5, 1), box-shadow .5s ease, border-color .5s ease;
}
.card-3d:hover {
    transform: translateY(-6px) rotateX(3deg) rotateY(3deg);
    box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--brand-border, var(--brand-primary, var(--gold))) 35%, transparent);
    border-color: color-mix(in srgb, var(--brand-border, var(--brand-primary, var(--gold))) 50%, transparent);
}

.floating { animation: floating 4s ease-in-out infinite; }
@keyframes floating {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
}

/* ---- Texto/brilho ---- */
.text-glow {
    text-shadow: 0 0 24px color-mix(in srgb, var(--gold) 55%, transparent);
}
.text-brand-gradient {
    background: linear-gradient(90deg, var(--brand-primary, var(--gold)), var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Cor de marca dinâmica (Loja.cor_marca) ---- */
.bg-brand { background-color: var(--brand-primary, var(--gold)); }
.text-brand { color: var(--brand-primary, var(--gold)); }
.border-brand { border-color: var(--brand-border, var(--brand-primary, var(--gold))); }
.btn-brand {
    background: linear-gradient(90deg, var(--brand-primary, var(--gold)), var(--wood));
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-brand:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--brand-primary, var(--gold)) 50%, transparent);
    filter: brightness(1.05);
}
.btn-brand:active { transform: translateY(0) scale(0.99); }

.badge-gold { background: var(--gold); color: #1c1917; }
.badge-brand { background: var(--brand-primary, var(--gold)); color: #fff; }

/* ---- Cabeçalho translúcido ---- */
.glass-header {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-800);
    transition: box-shadow .3s ease, background .3s ease;
    color: var(--text-primary);
}
.glass-header.scrolled { background: var(--header-bg-scrolled); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* ---- Blobs de luz ambiente (decorativo, atrás do conteúdo) ---- */
.blob {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    pointer-events: none;
    opacity: var(--blob-opacity);
    z-index: 0;
}
.blob-brand { background: var(--brand-primary, var(--gold)); }
.blob-gold { background: var(--gold); }

/* leve parallax das blobs conforme o scroll (JS soma um --parallax-y) */
.parallax-blob {
    transform: translateY(calc(var(--parallax-y, 0px) * var(--parallax-factor, 1)));
    transition: transform .05s linear;
}

/* ---- Cartões e superfícies ---- */
.surface {
    background: var(--bg-900);
    border: 1px solid var(--border-800);
}
.surface-raised {
    background: linear-gradient(160deg, var(--bg-900), color-mix(in srgb, var(--bg-900) 85%, black));
    border: 1px solid var(--border-800);
}

/* ---- Formulários sobre fundo escuro ---- */
.loja-dark input:not([type="checkbox"]):not([type="radio"]),
.loja-dark select,
.loja-dark textarea {
    background: var(--bg-900);
    border: 1px solid var(--border-700);
    color: var(--text-primary);
    border-radius: .65rem;
    padding: .55rem .8rem;
    width: 100%;
}
.loja-dark input::placeholder, .loja-dark textarea::placeholder { color: var(--text-tertiary); }
.loja-dark input:focus, .loja-dark select:focus, .loja-dark textarea:focus {
    outline: none;
    border-color: var(--brand-border, var(--brand-primary, var(--gold)));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-border, var(--brand-primary, var(--gold))) 25%, transparent);
}
.loja-dark input[type="radio"], .loja-dark input[type="checkbox"] {
    accent-color: var(--brand-primary, var(--gold));
    width: auto;
}

/* ---- Scrollbar customizada ---- */
.loja-dark::-webkit-scrollbar { width: 10px; }
.loja-dark::-webkit-scrollbar-track { background: var(--bg-950); }
.loja-dark::-webkit-scrollbar-thumb { background: var(--wood); border-radius: 5px; }
.loja-dark::-webkit-scrollbar-thumb:hover { background: var(--brand-primary, var(--gold)); }

/*
  ---- Carrossel de categorias (chips "flutuantes") ----
  Pedido do usuário, 21/09/2026: a barra de scroll nativa do filtro de
  categorias destoava do resto do design (nenhum outro elemento da loja
  usa scrollbar visível desse jeito). Trilho continua sendo um
  overflow-x-auto comum — no touch o dedo desliza normalmente, só a
  barra de rolagem em si fica escondida. No desktop (mouse/trackpad,
  @media hover:hover) aparecem duas setinhas discretas nas bordas, que
  só ficam visíveis quando dá pra rolar pra aquele lado (classe
  `.visivel`, controlada por JS no fim da página).
*/
.categorias-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.categorias-scroll::-webkit-scrollbar { display: none; }

.categoria-seta {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, color .15s ease, background-color .15s ease;
}
.categoria-seta.visivel { opacity: .85; pointer-events: auto; }
.categoria-seta:hover {
    opacity: 1;
    color: var(--brand-primary, var(--gold));
    background: color-mix(in srgb, var(--bg-900) 70%, transparent);
}
.categoria-seta:active { transform: translateY(-50%) scale(.9); }
.categoria-seta-esquerda { left: 0; }
.categoria-seta-direita { right: 0; }

@media (hover: hover) and (pointer: fine) {
    .categoria-seta { display: flex; }
    .categorias-carrossel .categorias-scroll { padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* ---- Toast de feedback ---- */
.toast-dark {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    left: 1.5rem;
    max-width: 22rem;
    margin-left: auto;
    z-index: 50;
    transform: translateY(8rem);
    opacity: 0;
    transition: all .3s ease;
    background: var(--bg-900);
    border: 1px solid var(--border-700);
    color: var(--text-primary);
    border-radius: 1rem;
    padding: .9rem 1.2rem;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.toast-dark.show { transform: translateY(0); opacity: 1; }

@media (max-width: 640px) {
    .card-3d:hover { transform: translateY(-3px); }
}