/* PetrusTech Pedir — temas de cor e componentes comuns.
   Cada loja escolhe um tema (pd_lojas.tema). A lista com nomes fica em app/lojas.php (PD_TEMAS).
   Um elemento com data-tema="..." recebe as cores daquele tema — o seletor de temas do painel
   usa isso para mostrar amostras reais. */

/* ---------- base clara (vale para todo tema claro) ---------- */
:root,
[data-tema] {
  --bg: #F7EFE2;
  --bg-2: #EFE2CB;
  --surface: #FFFBF4;
  --surface-2: #F3E7D3;
  --ink: #2A1A0E;
  --muted: #6B5341;
  --accent: #B8621B;
  --accent-2: #E3A83F;
  --primary: #C2451F;
  --primary-dark: #9E3415;
  --on-primary: #FFFFFF;
  --topo: #2A1A0E;
  --on-topo: #F7EFE2;
  --ok: #2E7D4F;
  --ok-bg: #DDEFE3;
  --warn: #9A5B00;
  --warn-bg: #FBEBCB;
  --danger: #B42318;
  --danger-bg: #FBE1DD;
  --line: rgba(42, 26, 14, .12);
  --input: #FFFFFF;
  --shadow: 0 10px 30px rgba(74, 44, 20, .12);
  --shadow-sm: 0 2px 8px rgba(74, 44, 20, .08);
  --radius: 18px;
  --font-serif: "Fraunces", Georgia, serif;
  --font-grotesca: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --font-title: var(--font-serif);
  --em-estilo: italic;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --title-weight: 800;
  color-scheme: light;
}

/* ---------- base escura ---------- */
[data-tema="escuro"], [data-tema="acai"], [data-tema="cafe"], [data-tema="brasa"] {
  --bg: #0A0A0A;
  --bg-2: #171310;
  --surface: #1C1712;
  --surface-2: #26201A;
  --ink: #FFFFFF;
  --muted: #C9C4BC;
  --topo: #0A0A0A;
  --on-topo: #FFFFFF;
  --ok: #5CC98A;
  --ok-bg: rgba(92, 201, 138, .14);
  --warn: #FFC857;
  --warn-bg: rgba(255, 200, 87, .14);
  --danger: #F26B5B;
  --danger-bg: rgba(229, 73, 58, .16);
  --line: rgba(255, 255, 255, .10);
  --input: #14100C;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- Creme e terracota (claro) — usa a base clara ---------- */

/* ---------- Noite dourada (escuro) ---------- */
[data-tema="escuro"] {
  --accent: #E3A83F; --accent-2: #FFE07A;
  --primary: #F2C230; --primary-dark: #E0AC00; --on-primary: #1A1400;
  --font-title: var(--font-grotesca); --em-estilo: normal;
}

/* ---------- Tomate (claro, vermelho) ---------- */
[data-tema="tomate"] {
  --bg: #FFF6F0; --bg-2: #FBE6DA; --surface: #FFFFFF; --surface-2: #FCECE3;
  --ink: #2B1510; --muted: #72493F;
  --accent: #B3261E; --accent-2: #F4A261;
  --primary: #D62828; --primary-dark: #A61E1E; --on-primary: #FFFFFF;
  --topo: #3A1410; --on-topo: #FFF6F0;
  --line: rgba(43, 21, 16, .12);
  --shadow: 0 10px 30px rgba(120, 30, 20, .12); --shadow-sm: 0 2px 8px rgba(120, 30, 20, .08);
  --font-title: var(--font-grotesca); --em-estilo: normal;
}

/* ---------- Oliva (claro, verde) ---------- */
[data-tema="oliva"] {
  --bg: #F4F6EE; --bg-2: #E6EBD9; --surface: #FDFEF9; --surface-2: #EAEFDD;
  --ink: #1E2A16; --muted: #56634A;
  --accent: #4D6B1F; --accent-2: #E9C46A;
  --primary: #3F7D20; --primary-dark: #2E5E17; --on-primary: #FFFFFF;
  --topo: #1E2A16; --on-topo: #F4F6EE;
  --line: rgba(30, 42, 22, .12);
  --shadow: 0 10px 30px rgba(40, 60, 20, .12); --shadow-sm: 0 2px 8px rgba(40, 60, 20, .08);
}

/* ---------- Oceano (claro, azul) ---------- */
[data-tema="oceano"] {
  --bg: #F1F6FB; --bg-2: #DFEAF5; --surface: #FFFFFF; --surface-2: #E6EFF8;
  --ink: #0D1B2A; --muted: #4A5D73;
  --accent: #0B5394; --accent-2: #4FC3F7;
  --primary: #1565C0; --primary-dark: #0D4A8F; --on-primary: #FFFFFF;
  --topo: #0D1B2A; --on-topo: #F1F6FB;
  --line: rgba(13, 27, 42, .12);
  --shadow: 0 10px 30px rgba(13, 50, 90, .12); --shadow-sm: 0 2px 8px rgba(13, 50, 90, .08);
  --font-title: var(--font-grotesca); --em-estilo: normal;
}

/* ---------- Menta (claro, verde-água) ---------- */
[data-tema="menta"] {
  --bg: #F0FAF7; --bg-2: #DCF1EA; --surface: #FFFFFF; --surface-2: #E3F4EE;
  --ink: #0E2A22; --muted: #4B6860;
  --accent: #0B6E53; --accent-2: #7FE0C3;
  --primary: #0B7F60; --primary-dark: #075E47; --on-primary: #FFFFFF;
  --topo: #0E2A22; --on-topo: #F0FAF7;
  --line: rgba(14, 42, 34, .12);
  --shadow: 0 10px 30px rgba(10, 80, 60, .12); --shadow-sm: 0 2px 8px rgba(10, 80, 60, .08);
  --font-title: var(--font-grotesca); --em-estilo: normal;
}

/* ---------- Morango (claro, rosa) ---------- */
[data-tema="morango"] {
  --bg: #FFF3F6; --bg-2: #FCE1E9; --surface: #FFFFFF; --surface-2: #FDE8EE;
  --ink: #3A0F1E; --muted: #7A4A5A;
  --accent: #AD1457; --accent-2: #FFB4C8;
  --primary: #C2255C; --primary-dark: #961B47; --on-primary: #FFFFFF;
  --topo: #3A0F1E; --on-topo: #FFF3F6;
  --line: rgba(58, 15, 30, .12);
  --shadow: 0 10px 30px rgba(120, 20, 60, .12); --shadow-sm: 0 2px 8px rgba(120, 20, 60, .08);
}

/* ---------- Açaí (escuro, roxo) ---------- */
[data-tema="acai"] {
  --bg: #140A1F; --bg-2: #1E1030; --surface: #24143A; --surface-2: #2E1B48;
  --ink: #FFFFFF; --muted: #CFC3E0;
  --accent: #D1B3FF; --accent-2: #F48FB1;
  --primary: #B388FF; --primary-dark: #9A66FF; --on-primary: #1A0B2E;
  --topo: #140A1F; --input: #1A0E2B;
  --font-title: var(--font-grotesca); --em-estilo: normal;
}

/* ---------- Café (escuro, marrom) ---------- */
[data-tema="cafe"] {
  --bg: #1A120C; --bg-2: #221810; --surface: #251A12; --surface-2: #30231A;
  --ink: #F5EDE3; --muted: #CDBBA7;
  --accent: #E3B17A; --accent-2: #F2D2A9;
  --primary: #D9A066; --primary-dark: #C4864A; --on-primary: #1A120C;
  --topo: #1A120C; --on-topo: #F5EDE3; --input: #1F160F;
}

/* ---------- Brasa (escuro, laranja) ---------- */
[data-tema="brasa"] {
  --bg: #0F0F10; --bg-2: #161618; --surface: #1A1A1C; --surface-2: #242427;
  --ink: #FFFFFF; --muted: #BDBDC2;
  --accent: #FF8A3D; --accent-2: #FFC857;
  --primary: #FF6B1A; --primary-dark: #E85A0C; --on-primary: #1A0A00;
  --topo: #0F0F10; --input: #141416;
  --font-title: var(--font-grotesca); --em-estilo: normal;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3, .titulo { font-family: var(--font-title); font-weight: var(--title-weight); line-height: 1.1; letter-spacing: -.01em; margin: 0; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.oculto { display: none !important; }
.muted { color: var(--muted); }
.pequeno { font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.preco { font-family: var(--font-title); font-weight: 800; color: var(--accent); white-space: nowrap; }

/* botões */
.btn {
  --b: var(--surface);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--b); color: var(--ink);
  font: 700 15px/1.1 var(--font-body);
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primario { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 35%, transparent); }
.btn.primario:hover { background: var(--primary-dark); }
.btn.perigo { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.sm { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
.btn.xs { min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
.btn.bloco { width: 100%; }
.btn.fantasma { background: transparent; }
.btn.redondo { width: 38px; min-height: 38px; padding: 0; border-radius: 50%; font-size: 22px; line-height: 1; }

/* formulários */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > span, .rotulo { font-size: 13px; font-weight: 700; color: var(--muted); }
input, select, textarea {
  font: 500 15px/1.3 var(--font-body);
  color: var(--ink);
  background: var(--input);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 13px;
  width: 100%;
  min-width: 0;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); padding: 0; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grade3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 560px) { .grade2, .grade3 { grid-template-columns: 1fr; } }

/* opções em pílula (entrega/retirada, pagamento) */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label {
  flex: 1 1 120px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; font-weight: 700; text-align: center;
}
.opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.opcoes label:has(input:focus-visible) { outline: 3px solid var(--accent-2); }

/* cartões e etiquetas */
.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 20px; }
.pilula {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  background: var(--surface-2); color: var(--muted);
}
.pilula .ponto { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pilula.aberta { background: var(--ok-bg); color: var(--ok); }
.pilula.fechada { background: var(--danger-bg); color: var(--danger); }
.pilula.aviso { background: var(--warn-bg); color: var(--warn); }
.pilula.aberta .ponto { box-shadow: 0 0 0 0 currentColor; animation: pulso 1.8s 4; } /* pulsa algumas vezes e para (animação sem fim pesa no celular) */
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* aviso rápido */
.aviso-rapido {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
  background: var(--ink); color: var(--bg);
  padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  opacity: 0; pointer-events: none; transition: .2s ease; z-index: 200; max-width: calc(100vw - 32px); text-align: center;
}
.aviso-rapido.ver { opacity: 1; transform: translate(-50%, 0); }
.aviso-rapido.erro { background: var(--danger); color: #fff; }

/* janelas */
dialog.janela {
  border: 0; padding: 0; border-radius: 22px; width: min(560px, calc(100vw - 24px));
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  max-height: calc(100dvh - 24px);
}
dialog.janela::backdrop { background: rgba(10, 6, 2, .55); backdrop-filter: blur(2px); }
.janela .jt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 8px; }
.janela .jt h2 { font-size: 22px; }
.janela .jc { padding: 8px 22px 16px; overflow: auto; }
.janela .jr { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 22px 20px; border-top: 1px solid var(--line); }
.fechar-x { border: 0; background: var(--surface-2); color: var(--ink); width: 36px; height: 36px; border-radius: 50%; font-size: 20px; cursor: pointer; flex: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* janela de adicionais (cardápio e PDV) */
.janela-adicionais .jc { max-height: 62dvh; }
.grupo-ad { border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px 8px; margin: 0 0 12px; }
.grupo-ad legend { display: flex; gap: 8px; align-items: center; padding: 0 6px; }
.grupo-ad .regra { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.grupo-ad .regra.obrig { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.grupo-ad.faltando { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.ad-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ad-linha:last-child { border-bottom: 0; }
.ad-linha.marcado .ad-nome { font-weight: 700; }
.ad-linha .contador { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border-radius: 999px; padding: 2px; }
.ad-linha .contador button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); font-weight: 800; cursor: pointer; }
.ad-linha .contador button:disabled { opacity: .35; cursor: not-allowed; }
.ad-linha .contador span { min-width: 22px; text-align: center; font-weight: 800; }
.item-adicionais { display: block; font-size: 12.5px; color: var(--muted); }
/* sabores (pizza meio a meio) */
.sab-qtd { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 4px; }
.chip-sab { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.chip-sab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.sab-linha { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 0; }
.sab-linha span { font-size: 13px; color: var(--muted); }
.sab-linha select { width: 100%; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }