/* =========================================================
   DK Prensados — Delivery
   Identidade: fundo preto, dourado (#e0a526), vermelho (#b91c1c)
   Mobile-first. Baseline: 375px.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700&family=Rubik:wght@400;500;600;700&display=swap');

:root{
  --bg: #0a0908;
  --bg-alt: #151311;
  --bg-card: #17140f;
  --bg-input: #1d1a15;
  --gold: #e0a526;
  --gold-light: #f2c661;
  --gold-dim: #a8811f;
  --red: #b91c1c;
  --red-light: #dc2626;
  --text: #f5f1e8;
  --text-dim: #b9b2a3;
  --text-faint: #7d766a;
  --border: rgba(224,165,38,0.22);
  --border-strong: rgba(224,165,38,0.45);
  --success: #3fae5b;
  --shadow-gold: 0 8px 30px -8px rgba(224,165,38,0.35);
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 64px;
  --font-display: 'Anton', 'Barlow Condensed', sans-serif;
  --font-accent: 'Barlow Condensed', sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  overflow-x: hidden; /* impede que elementos fixed (topbar/drawers) criem scroll horizontal */
  width: 100%;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; }
.hidden{ display:none !important; }
.container{
  width:100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 8px; }

/* =========================== Buttons =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 22px;
  border-radius: 999px;
  border: none;
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
  min-height: 48px;
  touch-action: manipulation;
}
.btn:active{ transform: scale(0.97); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-primary{
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #1a1200;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover{ filter: brightness(1.06); }
.btn-accent{
  background: linear-gradient(135deg, var(--red-light), var(--red));
  color: #fff;
  box-shadow: 0 8px 26px -8px rgba(185,28,28,0.55);
}
.btn-outline{
  background: transparent;
  color: var(--gold-light);
  border: 1.5px solid var(--border-strong);
}
.btn-outline:hover{ background: rgba(224,165,38,0.08); }
.btn-ghost{
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
}
.btn-block{ width:100%; }
.btn-sm{ min-height: 44px; padding: 9px 16px; font-size: .85rem; }
.btn-icon{
  width:44px; height:44px; min-height:44px; border-radius:50%;
  background: rgba(255,255,255,0.06); color: var(--text);
  border: 1px solid rgba(255,255,255,0.08);
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
}

/* =========================== Topbar =========================== */
.topbar{
  position: fixed; top:0; left:0; right:0; z-index: 60;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(10,9,8,0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--border);
  transition: background .2s ease;
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand{
  display:flex; align-items:center; gap:9px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.03em;
  color: var(--gold-light);
  text-shadow: 0 0 18px rgba(224,165,38,0.35);
  flex: 0 0 auto;
}
.brand .brand-dot{ color: var(--red-light); }

/* Logo real no header (index.html/status.html) — substitui o texto "DK •
   Prensados". Só altura fixa (largura automática) pra nunca distorcer;
   um pouco menor no mobile, cresce a partir do breakpoint de desktop. */
.brand-logo{ display:block; height:36px; width:auto; }
@media (min-width: 768px){
  .brand-logo{ height:44px; }
}
.topbar-nav{ display:flex; align-items:center; gap:10px; }
.social-link{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 1rem;
}
.social-link:hover{ background: rgba(224,165,38,0.15); border-color: var(--border-strong); }

/* =========================== Menu superior (index.html) ===========================
   Só 2 blocos, sempre — marca (esquerda) + "Acompanhar Meu Pedido" (direita),
   iguais em mobile e desktop (.topbar .container já resolve o
   justify-content:space-between, reaproveitado por status.html/painéis
   também — nenhuma regra extra de layout precisa aqui). Com só 1 item no
   menu, não há hambúrguer/drawer — "Ver Cardápio" existe só como o CTA em
   destaque dentro do hero (ver .hero-actions). */
.topbar-link{
  display:inline-flex; align-items:center; gap:7px;
  height:38px; padding: 0 16px; border-radius: 19px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: .86rem; font-weight:600; color: var(--text);
  white-space: nowrap;
}
.topbar-link:hover{ background: rgba(224,165,38,0.15); border-color: var(--border-strong); }

/* =========================== Hero =========================== */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  background: radial-gradient(ellipse at 50% 20%, #241a0c 0%, #0a0908 65%);
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.06);
  animation: hero-zoom 22s ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-media.is-ready{ opacity: 1; }
@keyframes hero-zoom{
  0%{ transform: scale(1.0); }
  100%{ transform: scale(1.12); }
}
.hero-fallback{
  position:absolute; inset:0; width:100%; height:100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(224,165,38,0.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(185,28,28,0.35), transparent 55%),
    #0a0908;
  background-size: 200% 200%;
  animation: fallback-drift 12s ease-in-out infinite;
}
@keyframes fallback-drift{
  0%{ background-position: 0% 0%; }
  50%{ background-position: 100% 100%; }
  100%{ background-position: 0% 0%; }
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,9,8,0.55) 0%, rgba(10,9,8,0.45) 45%, rgba(10,9,8,0.88) 100%);
}
.hero-content{
  position: relative; z-index: 2;
  text-align:center;
  padding: 0 20px;
  max-width: 720px;
}
.hero-eyebrow{
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: .78rem;
  color: var(--gold-light);
  margin-bottom: 14px;
  display:inline-block;
  border: 1px solid var(--border-strong);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.3);
}
.hero-title{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 12vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--text);
  text-transform: uppercase;
  text-shadow: 0 6px 40px rgba(0,0,0,0.7);
}
.hero-title .accent{ color: var(--gold-light); }
.hero-slogan{
  font-family: var(--font-accent);
  font-size: clamp(1.05rem, 3.6vw, 1.5rem);
  color: var(--text-dim);
  margin: 14px 0 30px;
  font-weight: 600;
  line-height: 1.3;
  /* Altura reservada pra até 2 linhas — a frase mais comprida do rodízio
     (ver HERO_SLOGANS em js/app.js) pode quebrar linha em telas estreitas;
     sem isso, trocar de frase "empurraria" o botão abaixo pra cima/baixo a
     cada troca (layout shift). display:flex centraliza 1 ou 2 linhas dentro
     dessa altura fixa, nos dois casos. */
  min-height: calc(1.3em * 2);
  display:flex; align-items:center; justify-content:center;
}
.hero-slogan-text{
  display:inline-block;
  transition: opacity .5s ease;
}
/* Meio da troca de frase (ver startHeroSloganRotation em js/app.js) — funde
   pra fora, o JS troca o texto, funde de volta. Nunca aplicada se
   prefers-reduced-motion estiver ativo (a rotação nem começa nesse caso). */
.hero-slogan-text.is-fading{ opacity:0; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom: 22px; left:50%; transform:translateX(-50%);
  z-index:2; color: var(--text-faint);
  font-size: 1.6rem;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* Badge "Aberto agora" / "Fechado — abre às..." no hero — sempre visível
   assim que os dados de horário chegam (ver js/app.js
   renderStatusLojaBadge()). Fica escondido (.hidden) enquanto os dados
   ainda não carregaram, e também se a loja nunca configurou horário
   nenhum (nesse caso o site não restringe nada, então não faz sentido
   mostrar um status que não existe de verdade). */
.status-loja-badge{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 14px;
  font-family: var(--font-accent);
  text-transform: uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:700;
  padding: 7px 14px; border-radius:999px;
  border: 1px solid var(--border-strong);
  background: rgba(0,0,0,0.3);
  color: var(--text-dim);
}
.status-loja-dot{ width:8px; height:8px; border-radius:50%; background: var(--text-faint); flex:0 0 auto; }
.status-loja-badge.is-aberto{ color: var(--gold-light); }
.status-loja-badge.is-aberto .status-loja-dot{ background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-loja-badge.is-fechado{ color: var(--text-dim); }
.status-loja-badge.is-fechado .status-loja-dot{ background: var(--red-light); box-shadow: 0 0 8px rgba(220,38,38,.6); }

/* Selo compacto "⭐ 4.8 (32 avaliações)" no hero — mesmo estilo de pílula
   do badge de horário acima, só que sempre dourado (não tem estado
   "aberto/fechado"). Ver #avaliacoesBadgeTopo em index.html. */
.avaliacoes-badge-topo{
  display:inline-flex; align-items:center; gap:6px;
  margin-top: 10px;
  font-family: var(--font-accent);
  letter-spacing:.04em; font-size:.8rem; font-weight:700;
  padding: 6px 14px; border-radius:999px;
  border: 1px solid var(--border-strong);
  background: rgba(224,165,38,0.08);
  color: var(--gold-light);
}

/* Conteúdo do modal "estamos fechados" (#lojaFechadaSheet em index.html,
   reaproveita o componente .sheet já usado pelo modal de personalização
   do lanche — ver css .sheet* acima). */
.loja-fechada-body{ text-align:center; padding-top:6px; }
.loja-fechada-emoji{ font-size:2.6rem; line-height:1; margin-bottom:12px; }
.loja-fechada-detalhe{ color: var(--text-dim); font-size:.98rem; margin:0; }

/* =========================== Sections =========================== */
.section{ padding: 62px 0; }
.section-head{ text-align:center; margin-bottom: 34px; }
.section-kicker{
  font-family: var(--font-accent);
  text-transform: uppercase; letter-spacing:.25em; font-size:.75rem;
  color: var(--red-light); font-weight:700; margin-bottom:6px; display:block;
}
.section-title{
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3rem);
  text-transform: uppercase;
  color: var(--text);
  position: relative;
  display:inline-block;
}
.section-title::after{
  content:'';
  display:block;
  width: 64px; height: 4px; border-radius: 4px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, var(--red-light), var(--gold));
}
.section-sub{ color: var(--text-dim); margin-top: 12px; font-size:.98rem; }
.section-alt{ background: linear-gradient(180deg, transparent, rgba(224,165,38,0.035), transparent); }

/* =========================== Cardápio Grid =========================== */
.menu-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px){ .menu-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .menu-grid{ grid-template-columns: repeat(3, 1fr); } }

.lanche-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display:flex; flex-direction:column; gap:10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lanche-card:hover{
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-gold);
}
.lanche-card-top{ display:flex; align-items:center; gap:12px; }
.lanche-icon{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--gold), var(--red));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
}
.lanche-name{
  font-family: var(--font-display);
  font-size: 1.28rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
}
.lanche-ingredients{
  color: var(--text-dim);
  font-size: .88rem;
  line-height: 1.5;
  flex: 1;
}
.lanche-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top: 4px;
}
.price{
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-light);
}
.price small{ font-size:.75rem; color: var(--text-faint); font-weight:500; }

/* Indisponibilidade de itens */
.unavailable-badge{
  display:inline-block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color: var(--text-faint); background: rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.18);
  padding: 7px 12px; border-radius:999px; white-space:nowrap;
}
.lanche-card.is-unavailable, .simple-card.is-unavailable{ opacity:.55; filter: grayscale(0.5); }
.lanche-card.is-unavailable .lanche-name,
.simple-card.is-unavailable .simple-card-name{ text-decoration: line-through; text-decoration-color: var(--red-light); }
.lanche-card.is-unavailable:hover{ transform:none; box-shadow:none; border-color: var(--border); }

/* =========================== Promoções de Hoje (combos) =========================== */
/* Visual deliberadamente mais "vermelho/dourado" que o resto do site —
   ver Bloco 3 do sistema de combos por dia da semana (js/app.js
   renderPromocoesHoje). Seção inteira some (.hidden) quando não há
   nenhum combo disponível pro dia de hoje. */
.promocoes-section{
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(185,28,28,0.16), transparent 70%),
    linear-gradient(180deg, rgba(224,165,38,0.05), transparent 60%);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.promocoes-kicker{ color: var(--gold-light); }
.promocoes-title{
  background: linear-gradient(90deg, var(--gold-light), var(--red-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promocoes-title::after{ background: linear-gradient(90deg, var(--gold), var(--red-light)); }

/* Card informativo do brinde automático (ver renderBrindePromoCard() em
   js/app.js) — fica ACIMA da grade de combos, largura total, visual
   próximo do combo-card mas sem a fita "Promoção" nem botão (é só
   informativo, o brinde de verdade acontece sozinho no carrinho). */
.brinde-promo-card{
  display:flex; align-items:flex-start; gap:16px;
  background: linear-gradient(160deg, var(--bg-card), rgba(224,165,38,0.14));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px -14px rgba(224,165,38,0.5);
}
.brinde-promo-icon{ font-size:2rem; line-height:1; flex:0 0 auto; }
.brinde-promo-body{ flex:1 1 auto; min-width:0; }
.brinde-promo-desc{ font-weight:700; color: var(--gold-light); font-size:1.02rem; margin:0 0 6px; }
.brinde-promo-opcoes{ color: var(--text); font-size:.9rem; margin:0 0 4px; }
.brinde-promo-info{ color: var(--text-dim); font-size:.82rem; margin:0; }

.combos-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 560px){ .combos-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .combos-grid{ grid-template-columns: repeat(3, 1fr); } }

.combo-card{
  position: relative;
  background: linear-gradient(165deg, var(--bg-card), rgba(185,28,28,0.10));
  border: 1.5px solid var(--gold);
  border-radius: var(--radius);
  padding: 22px 18px 18px;
  display:flex; flex-direction:column; gap:8px;
  box-shadow: 0 10px 30px -12px rgba(185,28,28,0.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.combo-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(224,165,38,0.55);
}
.combo-card-ribbon{
  position:absolute; top:-11px; left:16px;
  background: linear-gradient(135deg, var(--red-light), var(--red));
  color:#fff;
  font-family: var(--font-accent); font-weight:800; text-transform:uppercase;
  font-size:.68rem; letter-spacing:.05em;
  padding: 5px 12px; border-radius:999px;
  box-shadow: 0 4px 10px rgba(185,28,28,0.55);
}
.combo-card-name{
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 8px;
}
.combo-card-desc{ color: var(--text-dim); font-size:.9rem; line-height:1.5; flex:1; }
.combo-card-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top: 4px;
}
.combo-card-price{
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-light);
}

/* =========================== Avaliações dos Clientes =========================== */
.avaliacoes-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px){ .avaliacoes-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .avaliacoes-grid{ grid-template-columns: repeat(3, 1fr); } }

.avaliacao-card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display:flex; flex-direction:column; gap:8px;
  /* Reaproveita a mesma animação de entrada do .order-card — roda de
     novo em toda re-renderização (inclusive ao clicar "Ver mais"), já
     que o innerHTML recria os elementos do zero. */
  animation: card-in .3s ease;
}
.avaliacao-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.avaliacao-card-nome{ font-weight:700; font-size:.95rem; color: var(--text); }
.avaliacao-estrelas-view{ color: var(--gold); font-size:1rem; letter-spacing:1px; white-space:nowrap; }
.avaliacao-selo-verificada{
  display:inline-flex; align-items:center; gap:4px; align-self:flex-start;
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  color: var(--success); background: rgba(63,174,91,0.14);
  padding: 3px 9px; border-radius:999px;
}
.avaliacao-card-comentario{ color: var(--text-dim); font-size:.9rem; line-height:1.5; margin:0; flex:1; }
.avaliacao-card-data{ color: var(--text-faint); font-size:.75rem; margin:0; }

/* =========================== Moderação de avaliações (Painel do Dono) =========================== */
/* Contador "X avaliações aguardando revisão" — chamativo de propósito
   (borda/fundo vermelhos), pro dono não esquecer de checar a aba (ver
   renderAvaliacoesManage() em js/dono.js). Só aparece com pendentes > 0. */
.avaliacoes-visibilidade-row{
  display:flex; align-items:center; gap:12px;
  margin-top:16px; font-size:.9rem; color: var(--text-dim);
}

.avaliacoes-pendentes-alerta{
  display:flex; align-items:center; gap:8px;
  margin-top:16px; padding: 12px 16px;
  border: 1px solid rgba(185,28,28,0.45); border-radius: var(--radius-sm);
  background: rgba(185,28,28,0.1);
  color: var(--red-light); font-weight:700; font-size:.9rem;
}

.avaliacao-manage-row{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom:10px;
}
.avaliacao-manage-row-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
.avaliacao-manage-row-foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:10px; padding-top:10px; border-top: 1px solid var(--border);
}
.avaliacao-selo-anonima{
  display:inline-flex; align-items:center;
  font-size:.7rem; font-weight:700; letter-spacing:.02em;
  color: var(--text-faint); background: rgba(255,255,255,0.06);
  padding: 3px 9px; border-radius:999px;
}
.status-chip.status-av-pendente{ background: rgba(224,165,38,0.18); color: var(--gold-light); }
.status-chip.status-av-aprovada{ background: rgba(63,174,91,0.18); color: #6fd48c; }
.status-chip.status-av-rejeitada{ background: rgba(185,28,28,0.18); color: var(--red-light); }

.sugestao-manage-row{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom:10px; transition: opacity .15s ease;
}
.sugestao-manage-row.is-lida{ opacity:.65; }
.sugestao-manage-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.sugestao-manage-mensagem{ color: var(--text); font-size:.92rem; line-height:1.5; margin: 8px 0; white-space:pre-wrap; }

/* Bebidas: subgrupos por categoria (Latas / 600ml / 2 Litros) */
.bebida-subgroup{ margin-bottom: 28px; }
.bebida-subgroup:last-child{ margin-bottom: 0; }
.bebida-subgroup-title{
  font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.08em;
  font-size:.85rem; color: var(--red-light); font-weight:700; margin: 0 0 12px;
}

/* Adicionais (no modal do lanche) / Bebidas */
.simple-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px){ .simple-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){ .simple-grid{ grid-template-columns: repeat(3, 1fr); } }

.simple-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.simple-card-name{ font-weight:600; font-size:.96rem; }
.simple-card-price{ color: var(--gold-light); font-weight:700; font-size:.92rem; white-space:nowrap; }
.simple-card-actions{ display:flex; align-items:center; gap:8px; }

.stepper{ display:flex; align-items:center; gap:0; border:1px solid var(--border-strong); border-radius:999px; overflow:hidden; }
.stepper button{
  width:40px; height:40px; background: rgba(255,255,255,0.04); color: var(--text);
  border:none; font-size:1.1rem; display:flex; align-items:center; justify-content:center;
}
.stepper button:active{ background: rgba(224,165,38,0.18); }
.stepper .qty-val{ min-width:28px; text-align:center; font-weight:700; font-size:.92rem; }

/* =========================== Sobre / Footer =========================== */
.about-grid{
  display:grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){ .about-grid{ grid-template-columns: 1.2fr 1fr; align-items:center; } }
.about-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 22px;
}
.about-list li{ display:flex; gap:10px; padding: 8px 0; color: var(--text-dim); border-bottom: 1px dashed rgba(255,255,255,0.06); }
.about-list li:last-child{ border-bottom:none; }
.about-list b{ color: var(--text); }

.site-footer{
  padding: 46px 0 56px;
  color: var(--text-faint);
  font-size: .88rem;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.15));
}
.site-footer .foot-brand{ font-family: var(--font-display); color: var(--gold-light); font-size:1.3rem; letter-spacing:.02em; }

/* 3 colunas — empilham em 1 coluna no mobile, com espaçamento generoso
   entre blocos (nunca espremido); viram lado a lado a partir do desktop. */
.footer-grid{
  display:grid; gap: 36px;
  grid-template-columns: 1fr;
  text-align:center;
}
@media (min-width: 760px){
  .footer-grid{
    grid-template-columns: 1.3fr 1fr 1fr;
    text-align:left;
    gap: 28px;
  }
}
.footer-col-brand{ display:flex; flex-direction:column; gap:10px; align-items:center; }
@media (min-width: 760px){ .footer-col-brand{ align-items:flex-start; } }
.footer-slogan{ color: var(--text-dim); font-size:.92rem; margin:0; max-width: 34ch; }
.footer-endereco{ color: var(--text-faint); font-size:.85rem; margin:0; }
.footer-endereco:empty{ display:none; }

.footer-col-title{
  font-family: var(--font-accent);
  text-transform: uppercase; letter-spacing:.18em; font-size:.72rem;
  color: var(--gold-light); font-weight:700; margin: 0 0 14px;
}
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.footer-links a{
  color: var(--text-dim); font-size:.9rem; transition: color .15s ease;
}
.footer-links a:hover{ color: var(--gold-light); }
.footer-links li{ min-height: 1.3em; } /* mantém uma altura mínima por linha do rodapé, sem colapsar o espaçamento da lista */

.footer-bottom{ border-top: 1px solid var(--border); margin-top: 38px; padding-top: 22px; }
.footer-bottom-inner{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
}
@media (min-width: 760px){
  .footer-bottom-inner{ flex-direction:row; justify-content:space-between; text-align:left; }
}
.footer-copy{ margin:0; font-size:.8rem; color: var(--text-faint); }
.footer-credit{
  display:inline-flex; align-items:center; gap:6px;
  font-size: .74rem; color: var(--text-faint); transition: color .15s ease;
}
.footer-credit svg{ flex:0 0 auto; }
.footer-credit:hover{ color: var(--gold-light); }

/* Caixa da "sugestão privada" — de propósito FORA da .footer-grid (não é
   mais um link de navegação), com borda e fundo próprios pra ficar
   visualmente diferente do link "Deixar avaliação" ao lado. */
.footer-sugestao-box{
  margin-top: 32px; padding: 18px; text-align:center;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
}
.footer-sugestao-texto{ margin: 0 0 12px; font-size:.85rem; color: var(--text-dim); }

/* =========================== Seletor de estrelas =========================== */
/* Usado no formulário de avaliação (index.html #avaliacaoSheet) — 5
   botões clicáveis, preenchidos a partir da nota escolhida (classe
   .filled, ver renderEstrelasPicker() em js/app.js). */
.star-picker{ display:flex; gap:6px; font-size: 1.8rem; }
.star-btn{
  background:none; border:none; padding:0; cursor:pointer; line-height:1;
  color: var(--text-faint); transition: color .12s ease, transform .12s ease;
}
.star-btn:hover{ transform: scale(1.12); }
.star-btn.filled{ color: var(--gold); }

/* =========================== Floating Cart Button =========================== */
.cart-fab{
  position: fixed; right: 16px; bottom: 16px; z-index: 70;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--red-light), var(--red));
  color:#fff;
  border:none; border-radius: 999px;
  padding: 14px 20px;
  font-family: var(--font-accent);
  font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  box-shadow: 0 10px 30px -6px rgba(185,28,28,0.6);
  transition: transform .15s ease, opacity .25s ease;
}
.cart-fab:active{ transform: scale(0.96); }
/* Evita o cart-fab sobrepor/colar no rodapé quando o usuário rola até o
   final da página — some suavemente assim que o rodapé entra na tela
   (IntersectionObserver em js/app.js), volta a aparecer ao rolar pra cima.
   pointer-events:none junto da opacidade evita cliques "fantasma" num
   botão invisível enquanto ele está desvanecido. */
.cart-fab.is-hidden{
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  pointer-events: none;
}
.cart-fab .cart-badge{
  background: var(--gold-light); color:#1a1200;
  border-radius:50%; min-width:24px; height:24px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800;
}

/* =========================== Overlay / Drawer / Modal =========================== */
.overlay-backdrop{
  position: fixed; inset:0; z-index: 90;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  opacity:0; pointer-events:none;
  transition: opacity .22s ease;
}
.overlay-backdrop.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position: fixed; top:0; right:0; z-index: 95;
  width: 100%; max-width: 440px; height: 100%;
  background: var(--bg-alt);
  border-left: 1px solid var(--border);
  display:flex; flex-direction:column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
}
.drawer.is-open{ transform: translateX(0); }
.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.drawer-title{ font-family: var(--font-display); font-size:1.35rem; text-transform:uppercase; color: var(--gold-light); }
.drawer-body{ flex:1 1 auto; overflow-y:auto; padding: 16px 18px; -webkit-overflow-scrolling: touch; }
.drawer-footer{ flex:0 0 auto; padding: 16px 18px; border-top: 1px solid var(--border); background: var(--bg-alt); }

/* Bottom-sheet modal (item customization) */
.sheet{
  position: fixed; left:0; right:0; bottom:0; z-index: 95;
  max-height: 88vh;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  display:flex; flex-direction:column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -20px 60px rgba(0,0,0,0.55);
  margin: 0 auto;
  width:100%;
}
.sheet.is-open{ transform: translateY(0); }
@media (min-width: 640px){
  .sheet{ max-width: 520px; left:50%; right:auto; transform: translate(-50%, 120%); bottom: 5vh; border-radius: 20px; max-height: 85vh; }
  .sheet.is-open{ transform: translate(-50%, 0); }
}
.sheet-handle{ width:42px; height:5px; border-radius:4px; background: rgba(255,255,255,0.18); margin: 10px auto 0; flex:0 0 auto; }
.sheet-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding: 14px 18px 8px; flex:0 0 auto; }
.sheet-body{ flex:1 1 auto; overflow-y:auto; padding: 4px 18px 18px; }
.sheet-footer{ flex:0 0 auto; padding: 14px 18px; border-top:1px solid var(--border); }

.close-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: var(--text); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}

/* Cart item row */
.cart-item{
  display:flex; gap:12px; padding: 12px 0; border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.cart-item-icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 auto;
  background: linear-gradient(135deg, var(--gold), var(--red));
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
}
.cart-item-info{ flex:1 1 auto; min-width:0; }
.cart-item-name{ font-weight:700; font-size:.96rem; }
.cart-item-extras{ color: var(--text-faint); font-size:.78rem; margin-top:2px; }
.cart-item-removed{ color: var(--red-light); font-size:.78rem; margin-top:2px; }
.cart-item-obs{ color: var(--text-dim); font-size:.78rem; margin-top:2px; font-style: italic; }
.cart-item-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px; flex-wrap:wrap; }
.cart-item-price{ color: var(--gold-light); font-weight:700; font-size:.92rem; }
.link-btn{ background:none; border:none; color: var(--text-faint); font-size:.8rem; text-decoration:underline; padding:4px; }
.link-btn:hover{ color: var(--red-light); }

/* Item de brinde automático no carrinho (ver js/app.js atualizarBrinde())
   — visual claramente diferente de um item pago de propósito: fundo
   dourado bem sutil, ícone de presente em vez do gradiente padrão. */
.cart-item-brinde{
  background: rgba(224,165,38,0.06);
  border-radius: var(--radius-sm);
  padding-left: 8px; padding-right: 8px;
  margin: 0 -8px;
}
.cart-item-brinde .cart-item-icon{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.brinde-badge{
  display:inline-block; vertical-align:middle;
  background: var(--gold); color:#1a1200;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding: 2px 8px; border-radius:999px; margin-left:6px;
}
.cart-item-price-gratis{ color: var(--success); }

/* Seletor de opção de brinde dentro da própria linha do carrinho (ver
   cartItemHtml() em js/app.js — só aparece quando há mais de 1 opção
   configurada). Reaproveita o estilo genérico de <select>, só ajusta
   espaçamento pra caber dentro da linha do item. */
.brinde-select{ margin-top:6px; max-width: 240px; min-height:38px; padding:6px 10px; font-size:.85rem; }

/* Fade-out suave ao sumir do carrinho (ver removerBrindeSeExistir() em
   js/app.js) — a classe é aplicada num frame separado do nascimento do
   elemento, então a transição roda de verdade (opacidade cheia → 0),
   antes da linha ser removida de fato do estado do carrinho. */
.cart-item-brinde-fading{
  transition: opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}

/* Item de combo no carrinho (ver js/combos-store.js e cartItemHtml() em
   js/app.js) — ícone de fogo/promoção + selo, e o breakdown dos lanches/
   bebidas do combo (com "sem X" de cada lanche personalizado) na linha
   de extras, mesmo padrão visual de .cart-item-extras. */
.cart-item-combo .cart-item-icon{ background: linear-gradient(135deg, var(--red-light), var(--red)); }
.combo-badge{
  display:inline-block; vertical-align:middle;
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#1a1200;
  font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  padding: 2px 8px; border-radius:999px; margin-left:6px;
}

/* Banner "🎁 Quero o brinde" acima do subtotal (só aparece quando o
   carrinho atinge a quantidade mínima de lanches, ver
   renderBrindeBanner() em js/app.js). */
.brinde-banner{
  display:flex; align-items:center; gap:10px;
  background: rgba(224,165,38,0.1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom:12px;
  font-size:.86rem; color: var(--text); cursor:pointer;
}
.brinde-banner input[type="checkbox"]{ width:20px; height:20px; accent-color: var(--gold); flex:0 0 auto; }

.cart-empty{ text-align:center; padding: 40px 10px; color: var(--text-faint); }
.cart-empty .big-icon{ font-size:2.6rem; margin-bottom:10px; }

.totals-row{ display:flex; align-items:center; justify-content:space-between; padding: 4px 0; font-size:.92rem; color: var(--text-dim); }
.totals-row.grand{ font-size:1.15rem; font-weight:800; color: var(--text); border-top:1px solid var(--border); margin-top:8px; padding-top:12px; }
.totals-row.grand .val{ color: var(--gold-light); }

/* =========================== Item modal (adicionais) =========================== */
.item-modal-title{ font-family: var(--font-display); font-size:1.5rem; text-transform:uppercase; color:var(--text); }
.item-modal-price{ color: var(--gold-light); font-weight:700; font-size:1.15rem; margin-top:2px; }
.item-modal-desc{ color: var(--text-dim); font-size:.9rem; margin: 10px 0 4px; line-height:1.6; }
.sheet-subheading{
  font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.04em;
  font-size:.8rem; color: var(--gold-light); margin: 18px 0 8px; font-weight:600;
}
.sheet-subheading .opt{ text-transform:none; color: var(--text-faint); font-weight:400; letter-spacing:0; }
.extras-list{ margin-top: 14px; display:flex; flex-direction:column; gap:8px; }
.extra-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 10px 12px; background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
}
.extra-row label{ display:flex; align-items:center; gap:10px; font-size:.92rem; flex:1; }
.extra-row input[type="checkbox"]{ width:20px; height:20px; accent-color: var(--gold); flex:0 0 auto; }
.extra-price{ color: var(--gold-light); font-weight:600; font-size:.85rem; white-space:nowrap; }
.qty-block{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.qty-label{ font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; color: var(--text-dim); }

/* =========================== Forms =========================== */
.form-group{ margin-bottom: 16px; }
.form-row{ display:grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 480px){ .form-row.cols-2{ grid-template-columns: 1fr 1fr; } .form-row.cols-3{ grid-template-columns: 1fr 1fr 1fr; } }
label{
  display:block; font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.04em;
  font-size:.78rem; color: var(--text-dim); margin-bottom:6px; font-weight:600;
}
label .opt{ text-transform:none; color: var(--text-faint); font-weight:400; }
input[type="text"], input[type="tel"], input[type="time"], textarea, select{
  width:100%; padding: 13px 14px; border-radius: 10px;
  background: var(--bg-input); border: 1.5px solid rgba(255,255,255,0.08);
  color: var(--text); font-size: 1rem; font-family: var(--font-body);
  min-height: 48px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Faz o navegador desenhar o seletor nativo de horário (ícone de relógio,
   popup do time picker) em tema escuro, combinando com o resto do campo —
   suportado por Chrome/Edge; navegadores sem suporte ignoram a regra. */
input[type="time"]{ color-scheme: dark; }
textarea{ min-height: 84px; resize: vertical; }
input:focus, textarea:focus, select:focus{
  outline:none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,165,38,0.18);
}
input.invalid, textarea.invalid{ border-color: var(--red-light); box-shadow: 0 0 0 3px rgba(185,28,28,0.18); }
/* "Lembrar meus dados neste aparelho" + link discreto "Não sou eu" no checkout. */
.lembrar-dados-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 14px;
  margin: -4px 0 16px;
}
.lembrar-dados-label{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  text-transform:none; letter-spacing:0; font-size:.82rem; color: var(--text-dim); margin:0;
}
.lembrar-dados-label input{ width:16px; height:16px; accent-color: var(--gold); }
.lembrar-dados-limpar{
  background:none; border:none; padding:0; cursor:pointer;
  font: inherit; font-size:.76rem; color: var(--text-faint); text-decoration: underline;
}
.lembrar-dados-limpar:hover{ color: var(--gold-light); }

.field-error{ color: var(--red-light); font-size:.78rem; margin-top:5px; display:none; }
.field-error.show{ display:block; }

.pay-options{ display:grid; grid-template-columns: 1fr; gap:10px; }
@media (min-width:480px){ .pay-options{ grid-template-columns: repeat(3,1fr); } }
/* Seletor de tipo de entrega (Entrega/Retirar na loja) reaproveita todo
   o visual de .pay-options, mas só tem 2 opções — sem isso, o grid de 3
   colunas fixas deixaria uma coluna vazia à direita em telas ≥480px. */
#tipoEntregaOptions{ grid-template-columns: 1fr; }
@media (min-width:480px){ #tipoEntregaOptions{ grid-template-columns: repeat(2,1fr); } }
.pay-option{
  display:flex; align-items:center; gap:10px; padding: 13px 14px;
  background: var(--bg-input); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 10px;
  cursor:pointer; transition: border-color .15s ease, background .15s ease;
}
.pay-option input{ accent-color: var(--gold); width:18px; height:18px; }
.pay-option.checked{ border-color: var(--gold); background: rgba(224,165,38,0.1); }
.pay-option .pay-icon{ font-size:1.2rem; }
.pay-option .pay-name{ font-weight:600; font-size:.92rem; }
.pay-option .pay-note{ display:block; font-size:.7rem; color: var(--text-faint); font-weight:400; }

/* Steps indicator */
.step-indicator{ display:flex; align-items:center; gap:6px; margin-bottom: 18px; }
.step-dot{
  flex:1; height:4px; border-radius:4px; background: rgba(255,255,255,0.1);
}
.step-dot.active{ background: linear-gradient(90deg, var(--gold), var(--red-light)); }
.step-dot.done{ background: var(--gold-dim); }

.summary-block{ background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; margin-bottom:14px; }
.summary-block h4{ font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.04em; font-size:.8rem; color: var(--gold-light); margin-bottom:8px; }
.summary-block p{ margin:2px 0; font-size:.9rem; color: var(--text-dim); }
.summary-block p b{ color: var(--text); }

/* Toast */
.toast{
  position: fixed; left:50%; bottom: 90px; transform: translateX(-50%) translateY(20px);
  background: #1c1710; color: var(--text); border:1px solid var(--border-strong);
  padding: 12px 18px; border-radius: 999px; font-size:.88rem; font-weight:600;
  z-index: 120; opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  display:flex; align-items:center; gap:8px; max-width: 90vw; text-align:center;
}
.toast.is-open{ opacity:1; transform: translateX(-50%) translateY(0); pointer-events:auto; }

/* =========================== Status page =========================== */
.status-page{ min-height:100svh; padding: 90px 0 60px; }
.status-card{
  max-width: 640px; margin: 0 auto;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 20px;
}
.status-order-id{ text-align:center; }
.status-order-id .label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.15em; color: var(--text-faint); }
.status-order-id .value{ font-family: var(--font-display); font-size: 2.6rem; color: var(--gold-light); letter-spacing:.05em; }
.status-phone{ text-align:center; color: var(--text-dim); font-size:.88rem; margin-bottom: 26px; }

/* CTA "Avalie sua experiência" na tela de status (só visível com pedido
   'entregue', ver renderAvaliarCta() em js/status.js). */
.status-avaliacao-cta{
  text-align:center; margin: 0 0 26px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(224,165,38,0.06);
}
.status-avaliacao-cta p{ margin: 0 0 10px; font-size:.92rem; color: var(--text); }

.timeline{ display:flex; flex-direction:column; gap:0; margin: 26px 0; }
.timeline-step{ display:flex; gap:14px; position:relative; padding-bottom: 30px; }
.timeline-step:last-child{ padding-bottom:0; }
.timeline-step::before{
  content:''; position:absolute; left:19px; top:40px; bottom:0; width:2px;
  background: rgba(255,255,255,0.1);
}
.timeline-step:last-child::before{ display:none; }
.timeline-step.done::before{ background: var(--gold-dim); }
.timeline-dot{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background: rgba(255,255,255,0.06); border: 2px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  color: var(--text-faint); z-index:1;
}
.timeline-step.done .timeline-dot{ background: var(--gold-dim); border-color: var(--gold-dim); color:#1a1200; }
.timeline-step.active .timeline-dot{
  background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: var(--gold-light); color:#1a1200;
  box-shadow: 0 0 0 6px rgba(224,165,38,0.15);
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{ 0%,100%{ box-shadow: 0 0 0 6px rgba(224,165,38,0.15);} 50%{ box-shadow: 0 0 0 10px rgba(224,165,38,0.05);} }
.timeline-content{ padding-top:8px; }
.timeline-title{ font-weight:700; font-size:1.02rem; color: var(--text-faint); }
.timeline-step.done .timeline-title, .timeline-step.active .timeline-title{ color: var(--text); }
.timeline-desc{ font-size:.82rem; color: var(--text-faint); margin-top:2px; }

.status-error{ text-align:center; padding: 60px 20px; }
.status-error .big-icon{ font-size:3rem; margin-bottom:14px; }

.status-actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; justify-content:center; }

.order-detail{ margin-top:24px; border-top:1px solid var(--border); padding-top:18px; }

/* =========================== Painel (cozinha) =========================== */
.painel-body{ background: var(--bg); min-height:100vh; }
.login-wrap{
  min-height:100svh; display:flex; align-items:center; justify-content:center; padding: 20px;
}
.login-card{
  width:100%; max-width: 380px; background: var(--bg-card); border:1px solid var(--border);
  border-radius: var(--radius); padding: 30px 24px; text-align:center;
}
.login-card .brand{ justify-content:center; margin-bottom: 6px; font-size:1.6rem; }
.login-card p{ color: var(--text-dim); font-size:.88rem; margin-bottom:20px; }

.painel-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(10,9,8,0.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
}
.painel-header .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.painel-status-pill{ display:flex; align-items:center; gap:6px; font-size:.78rem; color: var(--text-faint); }
.dot-live{ width:9px; height:9px; border-radius:50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: blink 1.6s infinite; }
@keyframes blink{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.today-counter{
  display:flex; align-items:center; gap:8px;
  background: rgba(63,174,91,0.12); border:1px solid rgba(63,174,91,0.35);
  color: var(--success); font-weight:700; font-size:.85rem;
  padding: 8px 14px; border-radius: 999px; white-space:nowrap;
}
.today-counter .today-counter-icon{ font-size:1rem; }

.painel-tabs{
  display:flex; gap:8px; overflow-x:auto; padding: 14px 0 0;
  -webkit-overflow-scrolling: touch;
}
.painel-tab{
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: 999px; font-size:.85rem; font-weight:600;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color: var(--text-dim);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.painel-tab.active{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#1a1200; border-color:transparent; }
.painel-tab .count{
  background: rgba(0,0,0,0.25); border-radius:999px; padding: 1px 7px; font-size:.72rem;
}
.painel-tab.active .count{ background: rgba(0,0,0,0.2); }

.orders-grid{
  display:grid; grid-template-columns: 1fr; gap:16px; padding: 20px 0 60px;
}
@media (min-width: 700px){ .orders-grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px){ .orders-grid{ grid-template-columns: repeat(3,1fr); } }

.order-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius);
  padding: 16px; display:flex; flex-direction:column; gap:10px;
  animation: card-in .3s ease;
}
@keyframes card-in{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }
.order-card.status-recebido{ border-left: 4px solid var(--red-light); }
.order-card.status-em_preparo{ border-left: 4px solid var(--gold); }
.order-card.status-saiu_entrega{ border-left: 4px solid #3b82f6; }
.order-card.status-entregue{ border-left: 4px solid var(--success); opacity:.7; }
.order-card.status-cancelado{ border-left: 4px solid var(--text-faint); opacity:.55; filter: grayscale(0.6); }
.order-card.status-cancelado .order-id-tag{ text-decoration: line-through; }
.order-card.unpaid-alert{
  border: 1.5px solid var(--red-light);
  border-left: 4px solid var(--red-light);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(185,28,28,0.12);
}
.unpaid-badge{
  background: rgba(185,28,28,0.16); border:1px solid rgba(185,28,28,0.4); color: var(--red-light);
  font-size:.76rem; font-weight:700; padding: 6px 10px; border-radius: 8px; margin-top: 6px;
}
.order-card.taxa-provisoria-alert{
  border: 1.5px solid var(--gold);
  border-left: 4px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(224,165,38,0.12);
}
.taxa-provisoria-badge{
  background: rgba(224,165,38,0.16); border:1px solid rgba(224,165,38,0.4); color: var(--gold-light);
  font-size:.76rem; font-weight:700; padding: 6px 10px; border-radius: 8px; margin-top: 6px;
}

.payment-check{
  display:flex; align-items:center; gap:8px; margin-top:10px; cursor:pointer;
  font-size:.85rem; color: var(--text-dim); font-weight:600;
}
.payment-check input{ width:19px; height:19px; accent-color: var(--success); flex:0 0 auto; }

.order-card-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.order-id-tag{ font-family: var(--font-display); font-size:1.2rem; color: var(--gold-light); }
.order-time{ font-size:.74rem; color: var(--text-faint); }
.status-chip{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  padding: 4px 10px; border-radius:999px; white-space:nowrap;
}
.status-chip.status-recebido{ background: rgba(185,28,28,0.18); color: var(--red-light); }
.status-chip.status-em_preparo{ background: rgba(224,165,38,0.18); color: var(--gold-light); }
.status-chip.status-saiu_entrega{ background: rgba(59,130,246,0.18); color: #7fb0fb; }
.status-chip.status-entregue{ background: rgba(63,174,91,0.18); color: #6fd48c; }
.status-chip.status-cancelado{ background: rgba(125,118,106,0.22); color: var(--text-faint); }

.cancel-reason{
  background: rgba(255,255,255,0.05); border:1px dashed rgba(255,255,255,0.15); border-radius:8px;
  padding: 8px 10px; font-size:.82rem; color: var(--text-dim); margin-top: 8px;
}
.cancel-btn{ color: var(--red-light); }

.order-card-body p{ margin: 3px 0; font-size:.85rem; color: var(--text-dim); }
.order-card-body b{ color: var(--text); }
.order-items-list{ font-size:.85rem; color: var(--text-dim); margin: 4px 0; padding-left:16px; }
.order-obs{ background: rgba(224,165,38,0.08); border:1px dashed var(--border-strong); border-radius:8px; padding:8px 10px; font-size:.82rem; color: var(--text); }
.order-card-foot{ margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; }
.order-total{ font-weight:800; color: var(--gold-light); font-size:1.05rem; }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--text-faint); grid-column: 1/-1; }

/* =========================== Painel do Motoboy: board por seções =========================== */
/* Pensado pra uso na rua: com uma mão só, luva às vezes, sol forte na
   tela — botões grandes, chips fáceis de acertar com o polegar, alto
   contraste, texto maior que o resto do site. */
.motoboy-section{ margin-top: 30px; }
.motoboy-section:first-child{ margin-top: 4px; }
.motoboy-section-title{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.04em;
  font-size:1rem; font-weight:800; color: var(--gold-light); margin: 0 0 4px;
}
.motoboy-section-count{
  background: rgba(224,165,38,0.15); border:1px solid var(--border-strong); color: var(--gold-light);
  font-size:.78rem; font-weight:700; padding: 2px 10px; border-radius:999px;
}
.motoboy-section-sub{ color: var(--text-dim); font-size:.88rem; margin: 4px 0 14px; }

.motoboy-card{ gap: 12px; }
.motoboy-card-body p{ margin:0; }
.motoboy-client-name{ font-size:1.05rem; font-weight:700; color: var(--text); }
.motoboy-address{ font-size:.92rem; color: var(--text-dim); line-height:1.4; }

.motoboy-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin: 2px 0; }
.motoboy-chip{
  display:inline-flex; align-items:center; gap:7px;
  min-height:48px; padding: 0 16px;
  border-radius: 999px; font-size:.92rem; font-weight:700;
  background: rgba(255,255,255,0.06); border:1.5px solid var(--border-strong); color: var(--text);
  touch-action: manipulation;
}
.motoboy-chip-maps{ background: rgba(59,130,246,0.14); border-color: rgba(59,130,246,0.5); color: #9cc3fb; }

.motoboy-payment-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04); border:1px solid var(--border);
  margin-top: 4px;
}
.motoboy-payment-label{ font-size:.92rem; font-weight:700; color: var(--text-dim); }
.motoboy-payment-total{ font-size:1.15rem; font-weight:800; color: var(--gold-light); }
.motoboy-payment-note{ font-size:.82rem; color: var(--text-faint); }
/* Dinheiro em destaque forte — precisa saber na hora quanto de troco levar. */
.motoboy-payment-row.is-cash{
  background: rgba(63,174,91,0.14); border-color: rgba(63,174,91,0.5);
}
.motoboy-payment-row.is-cash .motoboy-payment-label{ color: #8ee6a8; }
.motoboy-payment-row.is-cash .motoboy-payment-total{ color: #8ee6a8; }
.motoboy-card-cash{ border-left: 4px solid var(--success); }

.motoboy-action-btn{ font-size:1.02rem; min-height:52px; }

.repasse-banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(224,165,38,0.16), rgba(185,28,28,0.1));
  border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  padding: 16px 20px; margin: 4px 0 16px;
}
.repasse-banner-label{ font-size:.88rem; font-weight:700; color: var(--text-dim); text-transform:uppercase; letter-spacing:.03em; }
.repasse-banner-value{ font-size:1.6rem; font-weight:800; color: var(--gold-light); }
.empty-state .big-icon{ font-size:2.4rem; margin-bottom:10px; }

/* =========================== Toggle switch (disponibilidade) =========================== */
.switch{ position:relative; display:inline-block; width:48px; height:28px; flex:0 0 auto; }
.switch input{ opacity:0; width:100%; height:100%; position:absolute; inset:0; margin:0; cursor:pointer; z-index:1; }
.switch .slider{
  position:absolute; inset:0; background: rgba(255,255,255,0.15); border-radius:999px;
  border: 1px solid rgba(255,255,255,0.1); transition: background .2s ease;
}
.switch .slider::before{
  content:''; position:absolute; width:22px; height:22px; left:2px; top:2px;
  background:#fff; border-radius:50%; transition: transform .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.switch input:checked + .slider{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); border-color: transparent; }
.switch input:checked + .slider::before{ transform: translateX(20px); }
.switch input:disabled + .slider{ opacity:.5; }

/* View tabs (Pedidos / Cardápio / Motoboy / Financeiro / Histórico / Clientes / Configurações — painel do dono) */
.view-tabs{
  display:flex; gap:10px; padding: 14px 0 4px;
  overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
}
.view-tab{
  flex: 0 0 auto; white-space:nowrap; text-align:center; padding: 12px 16px; border-radius: 10px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  color: var(--text-dim); font-family: var(--font-accent); text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; font-size:.92rem;
}
.view-tab.active{ background: linear-gradient(135deg, var(--gold-light), var(--gold)); color:#1a1200; border-color:transparent; }

/* Gerenciamento de cardápio (painel do dono) */
.cardapio-manage-section-title{
  font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.05em;
  font-size:.85rem; color: var(--gold-light); margin: 22px 0 10px; font-weight:700;
}
.cardapio-manage-section-title:first-child{ margin-top: 4px; }
.cardapio-manage-list{ display:flex; flex-direction:column; gap:10px; }
.cardapio-manage-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; transition: opacity .15s ease;
}
.cardapio-manage-row.is-off{ opacity:.6; }
.cardapio-manage-info{ min-width:0; }
.cardapio-manage-name{ font-weight:700; font-size:.94rem; }
.cardapio-manage-meta{ font-size:.76rem; color: var(--text-faint); margin-top:2px; }

/* =========================== Financeiro (painel do dono) =========================== */
.fin-period-tabs{ display:flex; gap:8px; overflow-x:auto; padding: 16px 0 4px; -webkit-overflow-scrolling: touch; }

.fin-custom-range{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; margin-top: 10px;
}

.fin-summary-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px;
}
@media (min-width: 560px){ .fin-summary-grid{ grid-template-columns: repeat(4, 1fr); } }
.fin-stat-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; display:flex; flex-direction:column; gap:6px;
}
.fin-stat-card.highlight{ border-color: var(--border-strong); box-shadow: var(--shadow-gold); }
.fin-stat-card.warn{ border-color: rgba(185,28,28,0.4); background: rgba(185,28,28,0.06); }
.fin-stat-card.muted{ opacity:.7; }
.fin-stat-label{ font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.04em; font-size:.74rem; color: var(--text-faint); }
.fin-stat-value{ font-family: var(--font-display); font-size:1.4rem; color: var(--gold-light); letter-spacing:.02em; }
.fin-stat-card.warn .fin-stat-value{ color: var(--red-light); }

.fin-chart-bars{
  display:flex; align-items:flex-end; gap: 6px; height: 160px;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 10px 10px; margin-top: 10px; overflow-x:auto;
}
.fin-bar-col{ flex: 1 0 26px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:26px; cursor:default; }
.fin-bar{
  width: 70%; min-height:3px; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  transition: filter .15s ease;
}
.fin-bar-col:hover .fin-bar{ filter: brightness(1.15); }
.fin-bar-label{ font-size:.66rem; color: var(--text-faint); margin-top:6px; white-space:nowrap; }

.fin-order-row{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom:10px;
}
.fin-order-row-main{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.fin-order-id{ font-family: var(--font-display); color: var(--gold-light); font-size:1rem; }
.fin-order-date{ font-size:.78rem; color: var(--text-faint); }
.fin-order-row-items{ font-size:.82rem; color: var(--text-dim); margin-top:6px; }
.fin-order-row-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; font-size:.82rem; color: var(--text-dim); flex-wrap:wrap; }
.fin-order-row-total{ font-weight:700; color: var(--gold-light); font-size:.95rem; }

/* =========================== Histórico / Clientes (painel do dono) =========================== */
.hist-toolbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin: 16px 0; }
.hist-toolbar .form-group{ margin-bottom:0; flex:1 1 160px; }

.fin-order-row-address{ font-size:.8rem; color: var(--text-faint); margin-top:2px; }

.client-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px; margin-bottom:10px; cursor:pointer; transition: border-color .15s ease, transform .15s ease;
}
.client-row:hover{ border-color: var(--border-strong); transform: translateY(-1px); }
.client-row-info{ min-width:0; }
.client-row-name{ font-weight:700; font-size:.96rem; }
.client-row-phone{ font-size:.8rem; color: var(--text-faint); }
.client-row-stats{ display:flex; gap:16px; flex-wrap:wrap; text-align:right; }
.client-stat{ display:flex; flex-direction:column; min-width:64px; }
.client-stat-label{ font-size:.66rem; text-transform:uppercase; color: var(--text-faint); letter-spacing:.03em; }
.client-stat-value{ font-weight:700; color: var(--gold-light); font-size:.92rem; }
.client-stat-value.warn{ color: var(--red-light); }

/* =========================== Configurações (painel do dono) =========================== */
.cfg-faixa-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom:10px;
}
.cfg-faixa-row .form-group{ margin-bottom:0; flex:1 1 90px; min-width:80px; }
.cfg-faixa-row .form-group label{ font-size:.68rem; }
.cfg-faixa-row-remove{ flex:0 0 auto; }

/* Linha de 1 dia da semana na aba Configurações → "Horário de
   Funcionamento" (ver dono.html/js/dono.js). */
.cfg-dia-row{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom:10px;
}
.cfg-dia-row-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cfg-dia-label{ font-family: var(--font-accent); font-weight:600; font-size:.95rem; color: var(--text); }
.cfg-dia-horarios{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap; }
.cfg-dia-horarios .form-group{ flex:1 1 130px; margin-bottom:0; }
/* .hidden (utilitário global, ver topo do arquivo) já cuida de esconder
   esta linha quando o dia está marcado como fechado. */

.rural-taxa-preview{ font-size:.85rem; margin-top:8px; color: var(--text-dim); }
.rural-taxa-preview.consult{ color: var(--red-light); font-weight:600; }

/* =========================== Utilitário de impressão =========================== */
@media print{
  .no-print{ display:none !important; }
}

/* =========================== Misc =========================== */
.mt-0{ margin-top:0; }
.text-center{ text-align:center; }
.skeleton{
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer{ 0%{ background-position: 200% 0;} 100%{ background-position: -200% 0;} }

/* =========================== Páginas de texto (privacidade.html, termos.html) =========================== */
.legal-content{
  max-width: 760px; margin: 0 auto;
  padding: 48px 0 80px;
}
.legal-content h1{
  font-family: var(--font-display); text-transform:uppercase;
  font-size: clamp(1.8rem, 5vw, 2.4rem); color: var(--gold-light);
  margin-bottom: 6px;
}
.legal-content .legal-updated{ color: var(--text-faint); font-size:.85rem; margin: 0 0 34px; }
.legal-content h2{
  font-family: var(--font-accent); text-transform:uppercase; letter-spacing:.03em;
  font-size: 1.15rem; color: var(--text); margin: 34px 0 12px;
  padding-top: 18px; border-top: 1px dashed rgba(255,255,255,0.08);
}
.legal-content h2:first-of-type{ border-top:none; padding-top:0; margin-top:0; }
.legal-content p, .legal-content li{ color: var(--text-dim); font-size:.96rem; line-height:1.7; }
.legal-content p{ margin: 0 0 14px; }
.legal-content ul{ margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.legal-content li{ margin-bottom: 6px; }
.legal-content strong{ color: var(--text); }
.legal-content a{ color: var(--gold-light); text-decoration: underline; text-underline-offset: 2px; }