/* --- FONTE -----------------------------------------------------
   @font-face é gerado dinamicamente no <style> inline de baseof.html
   a partir de .Site.Data.fontes + .Site.Params.fonte_texto. Carrega
   apenas os 5 weights da fonte ativa em vez dos 75 totais. */

/* --- VARIÁVEIS GLOBAIS --------------------------------------- */
:root {
  /* Cor primária: sobrescrita inline pelo baseof.html */
  --color-primary:       #e63946;
  --color-primary-hover: #c1121f;
  --color-primary-text:  #ffffff;
  --color-logo-fundo:    var(--color-primary);

  /* Paleta neutra */
  --color-bg:            #f8f7f4;
  --color-text:          #1a1a18;
  --color-muted:         #57574f;
  --color-border:        #d0cecc;
  --color-surface:       rgba(26, 26, 24, 0.035);
  --color-surface-hover: rgba(26, 26, 24, 0.065);
  --color-white:         #ffffff;

  /* Positivo (salvar, status aberto, sucesso) e Negativo (excluir, status fechado, erro) */
  --color-green:       #4a7c52;
  --color-green-hover: #3d6944;
  --color-red:         #b54040;
  --color-red-hover:   #9b3535;
  /* Atenção / pendente — amarelo claro; sobrescrito por cor_amarelo do hugo.toml */
  --color-yellow:       #fbbf24;
  --color-yellow-hover: #f59e0b;

  /* Focus / acessibilidade */
  --focus-ring: #1a1a18;
  --focus-bg:   rgba(26, 26, 24, 0.08);

  /* Transições */
  --transition-fast:   0.15s ease;
  --transition-medium: 0.2s ease;
  --transition-slow:   0.35s ease;

  /* Layout */
  --max-width: 900px;
  --header-h:  calc(94px + env(safe-area-inset-top));
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Tipografia */
  --font-sm: 12px;
  --font-lg: 15px;

  /* Espaçamento */
  --space-tight: 5px;
  --space-1: 10px;
  --space-2: 20px;
  --space-3: 30px;
  --space-4: 40px;

  /* Controles */
  --field-height: 40px;
  --field-textarea-min-height: 60px;
  --btn-cta-height: 60px;
  --btn-circular-sm: 30px;
  --btn-circular-md: 30px;

  /* Padding e gaps */
  --field-padding: 10px;
  --gap-inline: 10px;
  --field-divider: 1.5px solid var(--color-border);
  --button-border-width: 1.5px;
  --button-border-hover-color: color-mix(in srgb, var(--color-text) 35%, var(--color-border));
  --button-border: var(--button-border-width) solid var(--color-border);
  --button-border-primary: var(--button-border-width) solid var(--color-primary-hover);
  --button-border-green: var(--button-border-width) solid var(--color-green-hover);
  --button-border-red: var(--button-border-width) solid var(--color-red-hover);
  --button-border-dark: var(--button-border-width) solid var(--color-muted);

  /* Ícones */
  --icon-sm: 10px;
  --icon-md: 14px;
  --icon-lg: 16px;
  --icon-circular: 16px;
  --icon-circular-fechar: 12px;

  /* Ícones inline (branco) para estados de checkbox — recoloridos via fill/stroke,
     o que exige data URI inline (background-image externa não recolore; <input>
     não aceita pseudo-elemento de forma confiável). Fonte única reutilizada. */
  --icon-check-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='1.5,5 4,7.5 8.5,2.5' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-x-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4 4 16 16'%3E%3Cpath fill='white' d='M18,6h0a1,1,0,0,0-1.414,0L12,10.586,7.414,6A1,1,0,0,0,6,6H6A1,1,0,0,0,6,7.414L10.586,12,6,16.586A1,1,0,0,0,6,18H6a1,1,0,0,0,1.414,0L12,13.414,16.586,18A1,1,0,0,0,18,18h0a1,1,0,0,0,0-1.414L13.414,12,18,7.414A1,1,0,0,0,18,6Z'/%3E%3C/svg%3E");

  /* Z-indexes (ordem de empilhamento) */
  --z-overlay:      50;
  --z-nav:          90;
  --z-header:      100;
  --z-painel:      120;
  --z-painel-top:  121;
  --z-editar:      200;
  --z-skip:        300;
  --z-toast:       500;

  /* Shimmer skeleton */
  --shimmer-bg: linear-gradient(
    90deg,
    var(--color-surface)       25%,
    var(--color-surface-hover) 50%,
    var(--color-surface)       75%
  );
  --shimmer-size: 300% 100%;
}

/* --- RESET / BASE ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: manipulation; /* desativa zoom por toque duplo */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  font-family: var(--font-body, 'Poppins'), -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

img    { display: block; max-width: 100%; }
button { cursor: pointer; color: inherit; }
p      { text-wrap: pretty; margin: 0; }
h1, h2, h3, h4, h5, h6 { text-wrap: pretty; }

/* --- ACESSIBILIDADE ----------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 20px;
  z-index: var(--z-skip);
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--field-padding) var(--space-2);
  font-size: 14px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  transition: top var(--transition-medium);
}
.skip-link:focus { top: 0; }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  background-color: var(--focus-bg);
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- CONTAINER GLOBAL --------------------------------------- */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* --- HEADER ------------------------------------------------- */
/* position:fixed (não sticky): sticky no Chrome com DPR fracionário recalcula
   posição a cada frame de scroll e gera jitter sub-pixel + gap de 1px entre
   os dois elementos sticky empilhados. fixed elimina os dois problemas porque
   o compositor não recalcula posição por frame. */
.site-header {
  position: fixed;
  top: 0;
  left: max(0px, calc(50vw - var(--max-width) / 2));
  right: max(0px, calc(50vw - var(--max-width) / 2));
  z-index: var(--z-header);
  background: var(--color-bg);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: calc(30px + env(safe-area-inset-top)) 20px 0;
  gap: var(--space-2);
}

/* Cobre o gap sub-pixel de 1px que aparece entre os dois layers compostos
   (header + nav-wrap) em zoom != 100% ou DPR 2 em viewports largos.
   Usa body::after (em vez de site-header::after) porque a logo do header
   transborda 5.5px abaixo da borda do header — se a faixa de cobertura
   ficasse no stacking do header, cruzaria por cima da logo.
   z-index 89 fica abaixo do nav-wrap (90) e do header/logo (100), então
   só aparece exatamente onde existe o gap. */
body::after {
  content: '';
  position: fixed;
  top: calc(var(--header-h) - 1px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-bg);
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
}

.header-esquerda {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.header-logo-circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--color-logo-fundo, var(--color-primary));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
}

.site-logo-circle-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-logo-circle-img--padrao {
  width: calc(100% - 17px);
  height: calc(100% - 17px);
  object-fit: contain;
}

.header-identidade {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  flex: 1;
}

.header-linha-baixo {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-carrinho-inline {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
}

.header-status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.header-status--aberto { color: var(--color-green); }
.header-status--fechado { color: var(--color-red); }

.header-status--aberto  .status-icon-relogio { background-color: var(--color-green); }
.header-status--fechado .status-icon-relogio { background-color: var(--color-red); }

.status-icon-relogio,
.status-icon-carrinho {
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--color-muted);
}

.status-icon-relogio {
  width: var(--icon-lg);
  height: var(--icon-lg);
  /* Mask padrão (relógio às 12h): header.js troca pelo SVG da hora atual. Sem isto,
     enquanto o mask do JS não carrega o elemento aparece como um quadrado sólido
     preenchido com background-color (flash no hard-refresh). Com o mask vindo já do
     CSS — buscado cedo, na análise da folha — o ícone nasce em formato de relógio. */
  -webkit-mask: url('/ui/relogio-12.svg') center / contain no-repeat;
  mask: url('/ui/relogio-12.svg') center / contain no-repeat;
}

.status-icon-carrinho {
  width: 16px;
  height: 16px;
  position: relative;
  background: none;
}

.carrinho-icon-vazio,
.carrinho-icon-cheio {
  position: absolute;
  inset: 0;
  background-color: var(--color-muted);
  transition: background-color var(--transition-fast);
}

.carrinho-icon-cheio {
  -webkit-mask: url('/ui/carrinho-cheio.svg') center / contain no-repeat;
  mask: url('/ui/carrinho-cheio.svg') center / contain no-repeat;
  clip-path: inset(100% 0 0% 0);
}

.status-icon-carrinho.animando-fill .carrinho-icon-cheio,
.status-icon-carrinho.animando-drain .carrinho-icon-cheio {
  transition: background-color var(--transition-fast), clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-icon-carrinho.cheio .carrinho-icon-cheio {
  clip-path: inset(0% 0 0% 0);
}

.carrinho-icon-vazio {
  -webkit-mask: url('/ui/carrinho.svg') center / contain no-repeat;
  mask: url('/ui/carrinho.svg') center / contain no-repeat;
}

/* Atalho para o painel administrativo (header).
   Na loja: escondido por padrão, mostrado apenas com html.admin-logado.
   No admin: sempre visível, mas como <span> (não navega). */
.btn-admin-shortcut {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-muted);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}
html.admin-logado .btn-admin-shortcut { display: inline-flex; }
.btn-admin-shortcut:hover:not(.btn-admin-shortcut--noop) { color: var(--color-text); }
.btn-admin-shortcut--noop { cursor: default; }
.btn-admin-shortcut-icon {
  display: inline-block;
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: currentColor;
  -webkit-mask: url('/ui/administrador-loja.svg') center / contain no-repeat;
  mask: url('/ui/administrador-loja.svg') center / contain no-repeat;
}
body.admin .btn-admin-shortcut-icon {
  -webkit-mask: url('/ui/administrador-painel.svg') center / contain no-repeat;
  mask: url('/ui/administrador-painel.svg') center / contain no-repeat;
}

.site-title {
  margin: 0;
  line-height: 1;
  /* Neutraliza o default 2em do <h1> (cardapio usa <h1>, admin usa <p>).
     Sem isso, o strut do line-box do <h1> fica 32px e empurra a linha-baixo
     para baixo — quebra o alinhamento vertical com a logo. */
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Botão carrinho */
.carrinho-total-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.btn-carrinho {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-muted);
}

.status-icon-carrinho.balancou-esq {
  animation: carrinho-tilt-esq 0.32s cubic-bezier(0.4, 0, 1, 1);
}

.status-icon-carrinho.balancou-dir {
  animation: carrinho-tilt-dir 0.32s cubic-bezier(0.4, 0, 1, 1);
}

.status-icon-carrinho.removeu-esq {
  animation: carrinho-remove-esq 0.32s cubic-bezier(0.4, 0, 1, 1);
}

.status-icon-carrinho.removeu-dir {
  animation: carrinho-remove-dir 0.32s cubic-bezier(0.4, 0, 1, 1);
}

@keyframes carrinho-tilt-esq {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(1.2) rotate(-14deg); }
  65%  { transform: scale(1.1) rotate(-7deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

@keyframes carrinho-tilt-dir {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(1.2) rotate(14deg); }
  65%  { transform: scale(1.1) rotate(7deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

@keyframes carrinho-remove-esq {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(0.8) rotate(-14deg); }
  65%  { transform: scale(0.9) rotate(-7deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

@keyframes carrinho-remove-dir {
  0%   { transform: scale(1)   rotate(0deg); }
  30%  { transform: scale(0.8) rotate(14deg); }
  65%  { transform: scale(0.9) rotate(7deg); }
  100% { transform: scale(1)   rotate(0deg); }
}

/* --- PAINEIS SPA ------------------------------------------- */
/* Wrapper em tela inteira, com conteúdo interno centralizado em .carrinho-pagina.
   Assim a barra de rolagem do painel não rouba pixels da largura útil do conteúdo. */
.painel-carrinho-outer,
.painel-horarios-outer,
.painel-personalizacao-outer {
  position: fixed;
  top: calc(var(--header-h) + 75px);
  bottom: 0;
  left: 0;
  right: 0;
  overflow: clip;
  z-index: var(--z-painel);
  pointer-events: none;
}

/* Eleva o painel entrante durante o crossover quando ele está abaixo na ordem do DOM
   (ex: carrinho ou horários entrando enquanto personalização — que é a última no DOM — sai). */
.painel-carrinho-outer.painel-frente,
.painel-horarios-outer.painel-frente { z-index: var(--z-painel-top); }

.painel-carrinho,
.painel-horarios,
.painel-personalizacao {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 40px);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: auto;
  will-change: transform;
  /* visibility delay = duração do slide — esconde só depois de sair da tela */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.35s;
}

/* Painéis SPA precisam ocupar toda a largura da viewport pra capturar
   wheel events em qualquer posição do mouse (inclusive nas laterais).
   A centralização do conteúdo, que normalmente vem de `.carrinho-pagina`,
   passa a ser feita via padding lateral calculado. */
.painel-carrinho-outer > .painel-carrinho,
.painel-horarios-outer > .painel-horarios,
.painel-personalizacao-outer > .painel-personalizacao {
  max-width: none;
  padding-left: max(20px, calc((100% - var(--max-width)) / 2));
  padding-right: max(20px, calc((100% - var(--max-width)) / 2));
}

.painel-carrinho::-webkit-scrollbar,
.painel-horarios::-webkit-scrollbar,
.painel-personalizacao::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Background iOS fix — só quando o painel está aberto */
.modo-carrinho .painel-carrinho-outer,
.modo-horarios .painel-horarios-outer,
.modo-personalizacao .painel-personalizacao-outer {
  background: var(--color-bg);
}

/* Estado aberto */
.modo-carrinho .painel-carrinho,
.modo-horarios .painel-horarios,
.modo-personalizacao .painel-personalizacao {
  transform: translateX(0);
  visibility: visible;
  /* ao abrir: visibility imediata, sem delay */
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0s;
}

/* Painel SPA aberto: suprime o scroll da página html (o painel rola internamente).
   Os outers só existem na index (SPA); na standalone /carrinho/ não existe
   → página continua rolando normalmente.
   as barras de rolagem são ocultas para não reduzir a largura útil do conteúdo. */
html:has(.modo-carrinho):has(.painel-carrinho-outer),
html:has(.modo-horarios):has(.painel-horarios-outer),
html:has(.modo-personalizacao):has(.painel-personalizacao-outer) {
  overflow-y: hidden;
}

/* Fundo fixo full-width atrás do header+nav enquanto o painel SPA está aberto.
   Defesa contra iOS Safari ocasionalmente forçar scroll do <html> ao focar/desfocar
   inputs (toolbar do teclado), o que poderia expor conteúdo atrás da faixa centrada. */
html:has(.modo-carrinho) body::before,
html:has(.modo-horarios) body::before,
html:has(.modo-personalizacao) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + 75px);
  background: var(--color-bg);
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
}

/* --- NAV DE CATEGORIAS -------------------------------------- */
.categorias-nav-wrap {
  position: fixed;
  /* Sobrepõe 2px com o header (z menor → header cobre o overlap). Elimina
     o seam de antialiasing entre dois layers fixed adjacentes; com overlap
     real de pixels não há fronteira visível possível.
     padding-top: 2px compensa o shift para os pills não se moverem. */
  top: calc(var(--header-h) - 2px);
  padding-top: 2px;
  left: max(0px, calc(50vw - var(--max-width) / 2));
  right: max(0px, calc(50vw - var(--max-width) / 2));
  z-index: var(--z-nav);
  background: var(--color-bg);
}

/* Compensa o espaço ocupado pelos elementos fixed acima.
   Sem isso, o conteúdo em flow fica escondido atrás do header. */
main { padding-top: var(--header-h); }
main:has(.categorias-nav-wrap) { padding-top: calc(var(--header-h) + 75px); }
/* Fade lateral: overlay de cor por cima do nav, sem mask-image
   (mask-image no nav quebra emoji no WebKit iOS e deixa fundo transparente) */
.categorias-nav-wrap::before,
.categorias-nav-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 1;
  opacity: var(--nav-fade-l, 0);
}
.categorias-nav-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}
.categorias-nav-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
  opacity: var(--nav-fade-r, 0);
}
.categorias-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
}
.categorias-nav::-webkit-scrollbar { display: none; }

.categoria-pill {
  position: relative;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 15px;
  border-radius: 20px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  font-variant-emoji: emoji;
}

/* Overlay do skeleton — fica invisível por padrão, visível com .skeleton */
.categoria-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--shimmer-bg);
  background-size: var(--shimmer-size);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Estado skeleton: conteúdo coberto pelo ::after opaco, shimmer visível.
   Não usar color:transparent — o WebKit iOS cacheia glyph de emoji como "em branco"
   quando a cor é transparente e não re-rasteriza mesmo após a transição de cor. */
.categoria-pill.skeleton {
  border-color: transparent;
  background: var(--color-surface);
  pointer-events: none;
  cursor: default;
}
.categoria-pill.skeleton::after {
  opacity: 1;
  animation: skeleton-shimmer 1.5s infinite linear;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.categoria-pill:hover {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-primary);
}
.categoria-pill.ativa {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}

/* --- GRADE DO CARDÁPIO -------------------------------------- */
.cardapio-wrapper {
  padding-bottom: 100px;
}

.cardapio-grade {
  padding: 10px 20px 0;
}

/* Banner de frete grátis (loja) — entre os pills e o 1º título de categoria.
   Renderizado server-side em index.html só quando entrega_gratis_acima existe. */
.loja-banner-frete {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  /* topo 10px: a nav já tem 20px de padding inferior; 20+10 = 30px visíveis até os pills.
     laterais 20px (margem a margem) · base 30px até o 1º título. */
  margin: var(--space-1) var(--space-2) var(--space-3);
  padding: var(--space-1) var(--space-2);  /* respiro vertical de 10px */
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: var(--button-border-primary);   /* borda no tom escuro da própria cor, como no "Salvar alterações" */
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;  /* leva ao carrinho ao tocar/clicar */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-medium), border-color var(--transition-medium), filter var(--transition-fast);
}
/* Hover/press só na versão clicável da loja (carrinho é informativo).
   Hover restrito a ponteiro real evita o "sticky hover" no toque. */
@media (hover: hover) {
  .loja-banner-frete:not(.loja-banner-frete--carrinho):hover { filter: brightness(1.05); }
}
.loja-banner-frete:not(.loja-banner-frete--carrinho):active { filter: brightness(0.95); }

/* Banner replicado no topo do painel do carrinho (acima do título "Meu carrinho"),
   espelhando a posição na loja: 10px do topo, 30px até o que vem abaixo. Informativo
   (não leva a lugar nenhum). */
.loja-banner-frete--carrinho {
  margin: var(--space-1) 0 var(--space-3);
  cursor: default;
  user-select: auto;
}
/* Com o banner no topo, o cabeçalho dispensa o respiro superior próprio
   (senão soma 10px ao margin-bottom do banner). */
.painel-carrinho:has(.loja-banner-frete--carrinho) .carrinho-pagina-cabecalho {
  padding-top: 0;
}

/* Frete grátis atingido: comemora em verde (texto e ícone seguem em branco). */
.loja-banner-frete--ok {
  background: var(--color-green);
  border-color: var(--color-green-hover);
}

/* Taxa de entrega zerada por frete grátis: espelha a promoção de produto —
   valor original riscado em cinza + valor efetivo (R$ 0,00) na cor principal. */
.carrinho-taxa-original {
  text-decoration: line-through;
  color: var(--color-muted);
  margin-right: var(--space-tight);
}
.carrinho-taxa-gratis {
  color: var(--color-primary);
  font-weight: 700;
}

/* Emoji (🛵 enquanto falta · 🎉 ao atingir), trocado pelo JS conforme o estado.
   Texto puro, sem máscara nem color:transparent (bug de emoji no WebKit iOS). */
.loja-banner-frete-icon {
  flex-shrink: 0;
  font-size: var(--icon-lg);
  line-height: 1;
  font-variant-emoji: emoji;
}

/* Com banner presente, zera o padding-top da grade para o respiro até o
   1º título ser exatamente os 30px da margem inferior do banner (sem somar 10px). */
.cardapio-wrapper:has(.loja-banner-frete) .cardapio-grade { padding-top: 0; }

.categoria-secao { margin-bottom: 30px; }

.categoria-titulo {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 30px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  scroll-margin-top: calc(var(--header-h) + 52px);
}

/* --- GRID DE ITENS (scroll horizontal — padrão) ------------ */
.scroll-fade-wrap {
  position: relative;
}

.items-grid--scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.items-grid--scroll::-webkit-scrollbar { display: none; }

.items-grid--scroll .item-card {
  flex-shrink: 0;
  width: calc(50% - 24px);
  scroll-snap-align: start;
}
@media (min-width: 600px) {
  .items-grid--scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: unset;
  }
  .items-grid--scroll .item-card {
    width: auto;
    flex-shrink: unset;
  }
}
@media (min-width: 900px) {
  .items-grid--scroll { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* --- GRID DE ITENS (vertical — filtrado) -------------------- */
.items-grid--vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (min-width: 600px) {
  .items-grid--vertical { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .items-grid--vertical { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* --- CARD DE ITEM ------------------------------------------- */
.item-card {
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  animation: card-entrada 0.3s ease both;
}
.item-card:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.item-card.indisponivel { opacity: 0.5; pointer-events: none; }

@keyframes card-entrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.item-foto-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  overflow: hidden;
}

.item-foto-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--shimmer-bg);
  background-size: var(--shimmer-size);
  animation: skeleton-shimmer 1.5s infinite linear;
}

.item-foto-wrap.foto-pronta::before {
  display: none;
}

.item-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}
.item-foto-wrap--expandido .item-foto { transform: scale(1.07); }

.item-destaque-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.item-sem-foto {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--color-surface);
}

.item-info {
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.item-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
  text-wrap: pretty;
}

.item-descricao {
  font-size: var(--font-sm);
  color: var(--color-muted);
  line-height: 1.4;
  text-wrap: pretty;
}

.item-rodape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.item-preco {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text);
}

.item-preco-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
  flex-wrap: wrap;
}

.item-preco-original {
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: line-through;
}

.item-preco--desconto {
  color: var(--color-primary);
}

.item-desconto-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary-text);
  background: var(--color-primary);
  border-radius: 4px;
  padding: 2px 5px;
  line-height: 1.4;
}

.btn-adicionar,
.btn-personalizar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--btn-circular-md);
  height: var(--btn-circular-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--button-border-primary);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  transition: opacity var(--transition-fast);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn-adicionar:active,
.btn-personalizar:active { opacity: 0.7; }

.btn-adicionar-icon,
.btn-personalizar-icon {
  display: block;
  width: var(--icon-circular);
  height: var(--icon-circular);
  background-color: var(--color-primary-text);
  transition: transform var(--transition-fast);
}

.btn-adicionar-icon {
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

.btn-personalizar-icon {
  -webkit-mask: url('/ui/seta-direita.svg') center / contain no-repeat;
  mask: url('/ui/seta-direita.svg') center / contain no-repeat;
}

.btn-adicionar-icon.pulsou,
.btn-personalizar-icon.pulsou,
.btn-qty-icon.pulsou {
  animation: adicionar-pulso 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.item-preco-a-partir-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}

/* --- PAINEL DE PERSONALIZAÇÃO (montagem em etapas) ------- */

#personalizacao-root {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.personalizacao-etapa {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.personalizacao-etapa--bloqueada .personalizacao-etapa-nome,
.personalizacao-etapa--bloqueada .personalizacao-etapa-contador {
  color: var(--color-muted);
}

.personalizacao-etapa-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-inline);
}

.personalizacao-etapa-nome {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.personalizacao-etapa-contador {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.personalizacao-opcoes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.personalizacao-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: var(--field-padding);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.personalizacao-opcao:hover:not(.personalizacao-opcao--disabled) {
  border-color: var(--color-primary);
}

.personalizacao-opcao.selecionada {
  border-color: var(--color-primary);
}

.personalizacao-opcao--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.personalizacao-opcao-foto {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface);
}

.personalizacao-opcao-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  flex: 1;
  min-width: 0;
}

.personalizacao-opcao-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.personalizacao-opcao-descricao {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-muted);
}

.personalizacao-opcao-preco {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  flex-shrink: 0;
}

.personalizacao-opcao-preco--positivo {
  color: var(--color-primary);
}

.personalizacao-opcao-preco--indisponivel {
  font-style: italic;
  font-weight: 500;
  color: var(--color-muted);
}

.personalizacao-opcao-controles {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
}

.personalizacao-opcao-qty {
  min-width: var(--space-2);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.personalizacao-opcao-btn {
  width: var(--btn-circular-md);
  height: var(--btn-circular-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: var(--button-border-primary);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.personalizacao-opcao-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.personalizacao-opcao-btn-icon {
  display: block;
  width: var(--icon-circular);
  height: var(--icon-circular);
  background-color: var(--color-primary-text);
}

.personalizacao-opcao-btn-icon--adicionar {
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

.personalizacao-opcao-btn-icon--remover {
  -webkit-mask: url('/ui/remover.svg') center / contain no-repeat;
  mask: url('/ui/remover.svg') center / contain no-repeat;
}

.personalizacao-rodape {
  margin-top: 10px;
}

.personalizacao-aviso {
  font-size: 12px;
  color: var(--color-muted);
  text-align: center;
  margin: 0 0 var(--space-2);
}

@keyframes adicionar-pulso {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* --- PÁGINA DO CARRINHO ------------------------------------- */
.carrinho-pagina {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px 60px;
}

.carrinho-pagina-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--btn-circular-sm);
  padding: 10px 0 30px;
}

.carrinho-pagina-titulo {
  font-size: 18px;
  line-height: var(--btn-circular-sm);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-variant-emoji: emoji;
}

.carrinho-pagina-titulo > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 18px;
  text-indent: -2px;
  line-height: 1;
}

.categoria-titulo > span[aria-hidden="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  text-indent: -2px;
}

.btn-fechar-carrinho {
  width: var(--btn-circular-sm);
  height: var(--btn-circular-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text);
  border: var(--button-border-dark);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--color-primary-text);
  text-decoration: none;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.btn-fechar-carrinho:hover {
  background: var(--color-muted);
  border-color: var(--color-primary);
}

#btn-adicionar-produto,
#btn-adicionar-categoria {
  transform: translateY(1px);
}

.btn-fechar-icon {
  display: inline-block;
  width: var(--icon-circular-fechar);
  height: var(--icon-circular-fechar);
  background-color: var(--color-bg);
  mask: url('/ui/fechar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/fechar.svg') center / contain no-repeat;
}

.btn-adicionar-cat-icon,
.btn-adicionar-prod-icon {
  display: inline-block;
  width: var(--icon-circular);
  height: var(--icon-circular);
  background-color: var(--color-bg);
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

.carrinho-vazio {
  color: var(--color-muted);
  font-size: var(--font-lg);
}

.carrinho-vazio-link {
  color: var(--color-primary);
  text-decoration: none;
}

/* --- LISTA DE HORÁRIOS DE FUNCIONAMENTO -------------------- */
.horarios-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.horarios-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2) 0;
  font-size: var(--font-lg);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

.horarios-item:first-child {
  padding-top: 0;
}

.horarios-item:last-child {
  border-bottom: none;
}

.horarios-dia {
  font-weight: 600;
}

.horarios-horas {
  font-size: 14px;
  color: var(--color-text);
}

.horarios-sep {
  color: var(--color-muted);
  padding: 0 var(--field-padding);
  vertical-align: middle;
}

.horarios-item--fechado .horarios-dia,
.horarios-item--fechado .horarios-horas {
  color: var(--color-red);
}

.horarios-item--hoje .horarios-dia,
.horarios-item--hoje .horarios-horas {
  color: var(--color-green);
}

.horarios-item--hoje.horarios-item--fechado .horarios-dia,
.horarios-item--hoje.horarios-item--fechado .horarios-horas {
  color: var(--color-red);
}

.carrinho-itens {
  display: flex;
  flex-direction: column;
}

.carrinho-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}


.carrinho-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carrinho-item-nome {
  font-size: 14px;
  font-weight: 600;
}

.carrinho-item-descricao {
  font-size: var(--font-sm);
  color: var(--color-muted);
  text-wrap: pretty;
}

.carrinho-item-montagem {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-sm);
  color: var(--color-muted);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.carrinho-item-montagem > li::before {
  content: '• ';
  color: var(--color-muted);
}

.carrinho-item-preco-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
}

.carrinho-item-preco-original {
  font-size: 11px;
  color: var(--color-muted);
  text-decoration: line-through;
}

.carrinho-item-preco {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.carrinho-item-preco.com-desconto { color: var(--color-primary); }

.carrinho-item {
  border-bottom: 1px solid var(--color-border);
}

.carrinho-item:last-child {
  border-bottom: none;
  padding-bottom: 30px;
}

.carrinho-itens .carrinho-item:first-child {
  padding-top: 0;
}

.carrinho-item-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.btn-qty {
  width: var(--btn-circular-md);
  height: var(--btn-circular-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  border: var(--button-border-primary);
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.btn-qty:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-qty-icon {
  display: inline-block;
  width: var(--icon-circular);
  height: var(--icon-circular);
  background-color: var(--color-primary-text);
}

.btn-qty-icon--remover {
  mask: url('/ui/remover.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/remover.svg') center / contain no-repeat;
}

.btn-qty-icon--adicionar {
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

.carrinho-item-qty {
  font-size: 14px;
  font-weight: 600;
  width: var(--space-2);
  text-align: center;
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  color: inherit;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  appearance: none;
}
.carrinho-item-qty:focus {
  border-bottom-color: var(--color-primary);
  cursor: text;
}
.carrinho-item-qty::-webkit-inner-spin-button,
.carrinho-item-qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.carrinho-rodape {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.carrinho-campo-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.carrinho-campo-label {
  font-size: 13px;
  font-weight: 600;
}

/* Contador de caracteres na mesma linha do título do campo: título à esquerda,
   "X/N" à direita. Cinza; cor de alerta perto do teto, vermelho no limite. */
.carrinho-campo-label--com-contador {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--gap-inline);
}
.admin-contador {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.admin-contador--alerta { color: var(--color-primary); }
.admin-contador--limite { color: var(--color-red); }

/* Contador abaixo do campo (campos sem título adjacente, ex.: "Nome do estabelecimento"):
   wrapper com gap padrão de 10px entre o campo e o contador, alinhado à direita. */
.admin-campo-contador-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.admin-contador--bloco {
  display: block;
  text-align: right;
}

#admin-painel-dashboard .carrinho-campo-label {
  font-size: var(--font-lg);
}

/* ---- Accordion de configurações ------------------------- */

#admin-painel-dashboard .carrinho-campo-wrap {
  gap: 0;
}

.cfg-accordion-header .carrinho-campo-label {
  flex: 1;
}

.cfg-accordion-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: var(--color-text);
  -webkit-mask: left center / 16px 16px no-repeat;
  mask: left center / 16px 16px no-repeat;
}

.cfg-accordion-icon--garfo {
  -webkit-mask-image: url('/ui/garfo-e-faca.svg');
  mask-image: url('/ui/garfo-e-faca.svg');
}

.cfg-accordion-icon--loja {
  -webkit-mask-image: url('/ui/loja.svg');
  mask-image: url('/ui/loja.svg');
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
}

.cfg-accordion-icon--relogio {
  -webkit-mask-image: url('/ui/relogio-4.svg');
  mask-image: url('/ui/relogio-4.svg');
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

.cfg-accordion-icon--capacete {
  -webkit-mask-image: url('/ui/capacete.svg');
  mask-image: url('/ui/capacete.svg');
}

.cfg-accordion-icon--cartao {
  -webkit-mask-image: url('/ui/cartao.svg');
  mask-image: url('/ui/cartao.svg');
}

.cfg-accordion-icon--entrega {
  -webkit-mask-image: url('/ui/entrega.svg');
  mask-image: url('/ui/entrega.svg');
}

.cfg-accordion-icon--whatsapp {
  -webkit-mask-image: url('/ui/whatsapp.svg');
  mask-image: url('/ui/whatsapp.svg');
}

.cfg-accordion-icon--rolo {
  -webkit-mask-image: url('/ui/rolo-de-pintar.svg');
  mask-image: url('/ui/rolo-de-pintar.svg');
}

.cfg-accordion-icon--fonte {
  transform: scale(1.125);
  -webkit-mask-image: url('/ui/fonte.svg?v=20260521-1946');
  mask-image: url('/ui/fonte.svg?v=20260521-1946');
}

.cfg-accordion-icon--imagem {
  -webkit-mask-image: url('/ui/imagem.svg');
  mask-image: url('/ui/imagem.svg');
  -webkit-mask-size: 15px 15px;
  mask-size: 15px 15px;
}

.cfg-fonte-controles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cfg-fonte-preview {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--field-padding);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.cfg-fonte-preview-linha {
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.5;
}

.admin-logo-linha {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.admin-logo-preview-circulo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-logo-fundo, var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--color-border);
}

.admin-logo-acoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-inline);
}

.admin-logo-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.admin-logo-preview-img--padrao {
  width: calc(100% - 17px);
  height: calc(100% - 17px);
  object-fit: contain;
}

.admin-logo-cor-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

@media (max-width: 360px) {
  .admin-logo-linha {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: var(--gap-inline);
  }

  .admin-logo-preview-circulo {
    width: 86px;
    height: 86px;
  }
}

.cfg-accordion {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.cfg-accordion:first-child {
  padding-top: 0;
}

.cfg-accordion:not(:has(~ .cfg-accordion)) {
  border-bottom: none;
}

.cfg-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  line-height: 1;
}

.cfg-accordion-seta {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--color-muted);
  mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
  flex-shrink: 0;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cfg-accordion--aberto .cfg-accordion-seta {
  transform: rotate(180deg);
}

.cfg-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cfg-accordion--aberto .cfg-accordion-content {
  grid-template-rows: 1fr;
}

.cfg-accordion-inner {
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cfg-accordion-inner > * {
  flex-shrink: 0;
}

.cfg-accordion-inner > :first-child {
  margin-top: 20px;
}

.cfg-accordion-inner > :last-child {
  margin-bottom: 0;
}

.admin-bairros-lista:empty,
.admin-metodos-lista:empty {
  display: none;
}

.cfg-descricao {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
}

.carrinho-campo-input,
.carrinho-campo-select,
.carrinho-campo-textarea,
.admin-bairro-nome,
.admin-horario-input {
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  height: var(--field-height);
  padding: 0 var(--field-padding);
  background: var(--color-bg);
  color: var(--color-text);
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.carrinho-campo-select-wrap {
  position: relative;
}

.carrinho-campo-select-wrap::after {
  content: '';
  position: absolute;
  right: var(--field-padding);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: var(--color-muted);
  mask: url('/ui/selecionar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/selecionar.svg') center / contain no-repeat;
  pointer-events: none;
}

.carrinho-campo-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--field-padding) + var(--icon-lg) + var(--gap-inline));
  cursor: pointer;
}

.carrinho-campo-input:disabled,
.carrinho-campo-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.carrinho-campo-select-wrap:has(select:disabled)::after {
  opacity: 0.4;
}

/* Ícone selecionar.svg acompanha a borda primária no hover/foco (só no admin). */
body.admin .carrinho-campo-select-wrap:not(:has(select:disabled)):hover::after,
body.admin .carrinho-campo-select-wrap:focus-within::after {
  background-color: var(--color-primary);
}

.carrinho-retirada-label,
.carrinho-troco-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
}

.carrinho-retirada-cb,
.carrinho-troco-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  background-color: var(--color-red);
  border: 1.5px solid var(--color-red);
  border-radius: 4px;
  cursor: pointer;
  margin: 0;
  background-image: var(--icon-x-branco);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.carrinho-retirada-cb:checked,
.carrinho-troco-cb:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: var(--icon-check-branco);
  background-size: 10px 10px;
}

/* Rótulo "Valor para troco" + frase de apoio agrupados (espaçamento curto entre
   eles; o gap de 10px do .carrinho-campo-wrap separa do campo abaixo). */
.carrinho-campo-cabecalho {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}
.carrinho-campo-ajuda {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.3;
}

/* Campo monetário do troco: mesmo visual do campo de taxa (caixa com borda externa
   e divisória entre o "R$" e o número). A borda fica na wrap; o input é transparente
   e sem borda. Bloqueado ("Eu não preciso de troco") → esmaece a caixa inteira. */
.carrinho-troco-input-wrap {
  display: flex;
  align-items: stretch;
  height: var(--field-height);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.carrinho-troco-input-wrap:focus-within {
  border-color: var(--color-primary);
}
.carrinho-troco-prefix {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0 var(--field-padding);
  border-right: var(--field-divider);
  user-select: none;
  white-space: nowrap;
}
.carrinho-troco-input {
  font-family: inherit;
  font-size: 13px;
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  height: 100%;
  padding: 0 var(--field-padding);
  background: transparent;
  color: var(--color-text);
  box-sizing: border-box;
}
.carrinho-troco-input-wrap:has(.carrinho-troco-input:disabled) {
  opacity: 0.4;
}
/* Aviso quando o valor de troco é menor que o total (bloqueia o pedido). */
.carrinho-troco-aviso {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-red);
}

.carrinho-campo-textarea {
  height: auto;
  resize: none;
  min-height: var(--field-textarea-min-height);
  padding: var(--field-padding);
  line-height: 1.5;
}

/* Sem métodos de pagamento cadastrados: campo somente-leitura "A combinar pelo WhatsApp". */
.carrinho-pagamento-combinar {
  display: flex;
  align-items: center;
  min-height: var(--field-height);
  margin: 0;
  padding: 0 var(--field-padding);
  font-size: 13px;
  color: var(--color-muted);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
.carrinho-campo-input:focus,
.carrinho-campo-select:focus,
.carrinho-campo-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Borda primária ao hover nos campos do painel admin — espelha o estado :focus.
   Restrito a body.admin para não afetar o checkout do cliente. */
body.admin .carrinho-campo-input:hover:not(:disabled),
body.admin .carrinho-campo-select:hover:not(:disabled),
body.admin .carrinho-campo-textarea:hover:not(:disabled),
body.admin .admin-bairro-nome:hover:not(:disabled),
body.admin .admin-horario-input:hover {
  border-color: var(--color-primary);
}

.carrinho-linha-valor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.carrinho-campo-wrap + .carrinho-linha-valor {
  margin-top: 10px;
}

.carrinho-retirada-label + .carrinho-linha-valor {
  margin-top: 10px;
}

/* Aproxima só "Total a pagar" da "Taxa de entrega" (10px), compensando o
   gap global de 20px do .carrinho-rodape sem afetar os demais espaçamentos. */
.carrinho-linha-valor + .carrinho-linha-subtotal {
  margin-top: -10px;
}

.carrinho-linha-subtotal {
  font-size: 16px;
  font-weight: 700;
}

.btn-pedir {
  font-family: inherit;
  font-size: var(--font-lg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  width: 100%;
  height: var(--btn-cta-height);
  padding: 0 var(--space-2);
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: var(--button-border-primary);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}
.btn-pedir:hover:not(:disabled):not(.btn-pedir--fechado) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-pedir:disabled,
.btn-pedir.btn-pedir--fechado { opacity: 0.60; cursor: not-allowed; }

.btn-pedir--verde {
  background: var(--color-green);
  border: var(--button-border-green);
}
.btn-pedir.btn-pedir--verde:hover:not(:disabled):not(.btn-pedir--fechado) {
  background: var(--color-green-hover);
  border-color: var(--color-green-hover);
}

.btn-pedir--perigo {
  background: var(--color-red);
  border: var(--button-border-red);
}
.btn-pedir.btn-pedir--perigo:hover:not(:disabled):not(.btn-pedir--fechado) {
  background: var(--color-red-hover);
  border-color: var(--color-red-hover);
}

.btn-pedir-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--color-primary-text);
  mask: url('/ui/whatsapp.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/whatsapp.svg') center / contain no-repeat;
  flex-shrink: 0;
}

.btn-pedir-icon--correto {
  mask-image: url('/ui/salvar.svg');
  -webkit-mask-image: url('/ui/salvar.svg');
}

.btn-pedir-icon--sair {
  mask-image: url('/ui/sair.svg');
  -webkit-mask-image: url('/ui/sair.svg');
}

.btn-pedir-icon--lixeira {
  mask-image: url('/ui/lixeira.svg');
  -webkit-mask-image: url('/ui/lixeira.svg');
}

.btn-pedir-icon--limpar {
  mask-image: url('/ui/limpar.svg');
  -webkit-mask-image: url('/ui/limpar.svg');
}

.btn-pedir-icon--aviso {
  mask-image: url('/ui/aviso.svg');
  -webkit-mask-image: url('/ui/aviso.svg');
}

/* --- TOAST -------------------------------------------------- */
.toast-container {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 40px);
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 13px;
  font-weight: 600;
  padding: var(--field-padding) var(--space-2);
  border-radius: var(--radius-md);
  animation: toast-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.toast-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.toast--sucesso .toast-icon {
  -webkit-mask-image: url('/ui/carrinho.svg');
  mask-image: url('/ui/carrinho.svg');
}

.toast--erro .toast-icon {
  -webkit-mask-image: url('/ui/aviso.svg');
  mask-image: url('/ui/aviso.svg');
}
.toast--aviso .toast-icon {
  -webkit-mask-image: url('/ui/aviso.svg');
  mask-image: url('/ui/aviso.svg');
}
.toast:hover { opacity: 0.85; }
.toast.saindo { animation: toast-out 0.28s ease-in both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(calc(100% + 30px)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(calc(100% + 30px)); }
}

/* --- FOOTER ------------------------------------------------- */
footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  text-align: center;
}

.footer-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--color-muted);
}

.footer-copyright { color: var(--color-muted); }

/* --- EXPANSÃO DO BOTÃO AO TOCAR NA FOTO -------------------- */
/* Foto clicável em itens disponíveis */
.item-card:not(.indisponivel) .item-foto-wrap {
  cursor: pointer;
}

/* Escurecimento sobre a foto — absoluto dentro do item-foto-wrap */
.expande-foto-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(26, 26, 24, 0);
  transition: background 0.3s ease;
  pointer-events: none; /* cliques passam para o fotoWrap abaixo */
}

.expande-foto-overlay--ativo {
  background: rgba(26, 26, 24, 0.65);
}

/* --- PREFERS-REDUCED-MOTION (consolidado) ------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .painel-carrinho,
  .modo-carrinho .painel-carrinho,
  .painel-horarios,
  .modo-horarios .painel-horarios,
  .painel-personalizacao,
  .modo-personalizacao .painel-personalizacao { transition: none; }

  #pagina-overlay { animation-duration: 0.01s; }

  .toast,
  .toast.saindo { animation: none; }

  .btn-adicionar-icon.pulsou,
  .btn-personalizar-icon.pulsou,
  .btn-qty-icon.pulsou { animation: none; }

  .item-foto-wrap--expandido .item-foto { transform: none; }

  .status-icon-carrinho.balancou-esq,
  .status-icon-carrinho.balancou-dir,
  .status-icon-carrinho.removeu-esq,
  .status-icon-carrinho.removeu-dir { animation: none; }

  .status-icon-carrinho.animando-fill .carrinho-icon-cheio,
  .status-icon-carrinho.animando-drain .carrinho-icon-cheio {
    transition: background-color var(--transition-fast);
  }

  .expande-foto-overlay { transition: none; }

  .cfg-accordion-seta,
  .cfg-accordion-content,
  .admin-etapa-content,
  .admin-etapa-inner { transition: none; }

  .admin-horario-input-wrap--vazio::before { transition: none; }

  .categoria-pill.skeleton::after { animation: none; }

  .item-card, .item-card:hover { animation: none; transform: none; }

  .item-foto-wrap::before { animation: none; }

  .admin-confirmacao-backdrop,
  .admin-confirmacao,
  .admin-ajuste-backdrop,
  .admin-ajuste,
  .admin-ajuste-grade { transition: none; transform: none; }

  .admin-etapa-bloco--movida,
  .admin-categoria-item--movida-cima,
  .admin-categoria-item--movida-baixo,
  .admin-etapa-opcao--nova,
  .admin-etapa-corpo--revelar,
  .admin-regra-corpo--revelar,
  .admin-pedido-item--novo { animation: none; }

  .admin-regra-bloco { transition: none; }
}

/* --- ADMIN -------------------------------------------------- */
.admin-erro {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-red);
  padding: var(--field-padding);
  background: color-mix(in srgb, var(--color-red) 8%, transparent);
  border-radius: var(--radius-sm);
  border: 1.5px solid color-mix(in srgb, var(--color-red) 25%, transparent);
}

.admin-erro--animar { animation: card-entrada 0.2s ease both; }

#admin-painel-login .carrinho-pagina-cabecalho,
#admin-painel-dashboard .carrinho-pagina-cabecalho,
#admin-painel-produtos .carrinho-pagina-cabecalho,
#admin-painel-categorias .carrinho-pagina-cabecalho,
#admin-painel-editar .carrinho-pagina-cabecalho {
  padding-top: 10px;
}

#admin-painel-dashboard .carrinho-rodape {
  gap: 0;
}

#admin-painel-dashboard .admin-acoes-grupo {
  margin-top: var(--space-2);
}

#admin-painel-editar .carrinho-rodape {
  gap: 30px;
}

#admin-editar-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-acoes-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* Horários */
.admin-horarios-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-horario-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
}

.admin-horario-dia {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
  white-space: nowrap;
}

.admin-horario-fechado-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex-shrink: 0;
}

.admin-horario-cb,
.admin-disponivel-cb,
.admin-frete-ativo-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.admin-horario-cb:checked,
.admin-disponivel-cb:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: var(--icon-check-branco);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}

/* ---- Estado explícito ligado/desligado nos checkboxes tradicionais ----
   Verde + check = ligado/positivo; vermelho + X (fechar.svg) = desligado/negativo.
   - "Produtos nesta categoria" (.cat-item-cb) e "Etapa obrigatória"
     (.admin-etapa-obrigatoria): desmarcado = vermelho + X.
   - Horários (.admin-horario-cb, label "Fechado") tem sentido invertido, então
     a COR segue o significado real: aberto (desmarcado) = verde + check,
     fechado (marcado) = vermelho + X. */

/* X branco (fechar.svg) para o estado "desligado" — 1px menor que o check */
.cat-item-cb,
.admin-etapa-obrigatoria,
.admin-frete-ativo-cb,
.admin-horario-cb:not(.cat-item-cb):checked {
  background-color: var(--color-red);
  border-color: var(--color-red);
  background-image: var(--icon-x-branco);
  background-size: 9px 9px;
}

/* Marcado = "ligado": verde + check (produtos da categoria, etapa obrigatória, frete grátis) */
.cat-item-cb:checked,
.admin-etapa-obrigatoria:checked,
.admin-frete-ativo-cb:checked {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: var(--icon-check-branco);
}

/* Texto dinâmico da obrigatoriedade: marcado (verde) = "Esta etapa é obrigatória";
   desmarcado (vermelho) = "Esta etapa não é obrigatória". Padrão :checked ~ irmão
   (checkbox visível, confiável — igual ao texto Aberto/Fechado dos horários). */
.admin-etapa-obrigatoria-texto--sim { display: none; }
.admin-etapa-obrigatoria:checked ~ .admin-etapa-obrigatoria-texto--sim { display: inline; }
.admin-etapa-obrigatoria:checked ~ .admin-etapa-obrigatoria-texto--nao { display: none; }

/* Horário desmarcado (= dia aberto): verde + check */
.admin-horario-cb:not(.cat-item-cb) {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: var(--icon-check-branco);
}
.admin-horario-fechado-texto {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
  user-select: none;
}

/* Texto dinâmico do dia: desmarcado (verde) = "Aberto"; marcado (vermelho) =
   "Fechado". Padrão CSS :checked ~ irmão (checkbox visível, confiável). */
.admin-horario-texto--fechado { display: none; }
.admin-horario-cb:checked ~ .admin-horario-texto--aberto  { display: none; }
.admin-horario-cb:checked ~ .admin-horario-texto--fechado { display: inline; }

/* Toggle de frete grátis (mesmo sistema): desmarcado = "desativado" (vermelho + X);
   marcado = "ativado" (verde + check). */
.admin-frete-ativo-texto { user-select: none; }
.admin-frete-ativo-texto--on { display: none; }
.admin-frete-ativo-cb:checked ~ .admin-frete-ativo-texto--off { display: none; }
.admin-frete-ativo-cb:checked ~ .admin-frete-ativo-texto--on  { display: inline; }

.admin-horario-times {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  transition: opacity var(--transition-fast);
}

.admin-horario-range {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

.admin-horario-range-add {
  flex: unset;
  width: 100%;
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  box-sizing: border-box;
}

.admin-horario-range-add[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-horario-range-add[aria-disabled="true"]:hover {
  background: var(--color-surface);
}

.admin-horario-input-wrap {
  position: relative;
  flex: 1;
  min-width: 60px;
}

.admin-horario-input-wrap::after {
  content: '';
  position: absolute;
  right: var(--field-padding);
  top: 50%;
  transform: translateY(-50%);
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-muted);
  mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
  pointer-events: none;
}

.admin-horario-times--oculto {
  opacity: 0.25;
  pointer-events: none;
}

.admin-horario-times--oculto .admin-horario-input-wrap {
  box-shadow: inset 0 0 0 1.5px var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.admin-horario-times--oculto .admin-horario-input {
  opacity: 0;
}

.admin-horario-input-wrap--vazio::before {
  content: '--:--';
  position: absolute;
  left: var(--field-padding);
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-border);
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.15s ease;
}

.admin-horario-times--oculto .admin-horario-input-wrap--vazio::before {
  opacity: 0;
}

.admin-horario-input-wrap--vazio:focus-within::before {
  display: none;
}

.admin-horario-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--field-padding) + var(--icon-md) + var(--gap-inline));
  text-align: left;
}

.admin-horario-input::-webkit-calendar-picker-indicator {
  display: none;
}

.admin-horario-input::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

.admin-horario-input::-webkit-datetime-edit,
.admin-horario-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
  text-align: left;
  width: 100%;
}

.admin-horario-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-horario-range--invalido .admin-horario-input {
  border-color: var(--color-red);
}

.admin-horario-sep {
  font-size: var(--font-sm);
  color: var(--color-muted);
  flex-shrink: 0;
}


/* ---- Bairros e taxas de entrega ------------------------- */

.admin-bairros-lista,
.admin-metodos-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-bairro-linha {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
}

.admin-bairro-nome {
  flex: 1;
  min-width: 0;
}
.admin-bairro-nome:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-bairro-taxa-wrap {
  display: flex;
  align-items: stretch;
  height: var(--field-height);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}
.admin-bairro-taxa-wrap:focus-within,
.admin-bairro-taxa-wrap:hover { border-color: var(--color-primary); }

.admin-bairro-taxa-prefix {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  padding: 0 var(--field-padding);
  border-right: var(--field-divider);
  user-select: none;
  white-space: nowrap;
}

.admin-bairro-taxa-input {
  font-family: inherit;
  font-size: 13px;
  border: none;
  outline: none;
  height: 100%;
  padding: 0 var(--field-padding);
  background: transparent;
  color: var(--color-text);
  width: 80px;
  box-sizing: border-box;
}
.admin-bairro-taxa-input::-webkit-outer-spin-button,
.admin-bairro-taxa-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Campo de taxa do bairro: teto R$ 999,99 → cabe em ~6 dígitos. Estreita o campo
   (respiro de 10px = o próprio --field-padding) e alinha à esquerda, liberando
   largura para o nome do bairro (flex). Escopo só na lista de bairros para não
   afetar o frete grátis nem os preços de opções, que reusam .admin-bairro-taxa-input. */
.admin-bairros-lista .admin-bairro-taxa-input {
  width: 64px;
  text-align: left;
}

/* No accordion "Condição para frete grátis" o campo ocupa a largura total (não é uma
   coluna estreita como a taxa de bairro). */
.admin-frete-gratis-wrap { width: 100%; }
.admin-frete-gratis-wrap .admin-bairro-taxa-input { width: 100%; }

/* Agrupa o rótulo "Valor de compra mínimo" + o campo num par com gap próprio de 10px
   (--gap-inline), em vez dos 20px (--space-2) do gap entre os filhos do .cfg-accordion-inner.
   Como contêiner único, recebe os 20px do gap padrão acima/abaixo. Evita a margem negativa
   (que no inspetor sobrepunha o texto do rótulo). */
.cfg-frete-campo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
/* Some quando o frete grátis está desativado (classe alternada por JS, não :has). */
.cfg-frete-campo--oculto { display: none; }
/* font-size do rótulo volta a 13px (padrão de rótulo de campo): o #admin-painel-dashboard
   sobe todos os .carrinho-campo-label pra --font-lg, o que faz sentido nos títulos dos
   accordions, mas não neste rótulo interno. O ID entra no seletor pra vencer a
   especificidade da regra #admin-painel-dashboard .carrinho-campo-label. */
#admin-painel-dashboard .cfg-frete-campo .carrinho-campo-label {
  font-size: 13px;
}

/* Toggle de ativação (checkbox + texto), acima do campo de valor. */
.admin-frete-ativo {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--gap-inline);
}

/* Campo de valor desabilitado quando a campanha está inativa. */
.admin-frete-gratis-wrap:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin-frete-gratis-wrap input:disabled { cursor: not-allowed; }

/* Observação informativa (ícone aviso.svg + texto), no padrão dos avisos do painel. */
.admin-frete-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-muted);
  margin: var(--gap-inline) 0 0;
  line-height: 1.4;
}
.admin-frete-aviso::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-muted);
  mask: url('/ui/aviso.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/aviso.svg') center / contain no-repeat;
}

.admin-bairro-remover {
  align-self: stretch;
  width: var(--btn-circular-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: var(--button-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}
.admin-bairro-remover:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.admin-bairro-remover-icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-text);
  mask: url('/ui/fechar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/fechar.svg') center / contain no-repeat;
}

/* Linha protegida "Pagamento em espécie": campo idêntico aos demais, porém somente
   leitura (não editável). Desativado → input no estado desabilitado (cinza) e o
   botão troca o X por "+". */
.admin-metodo-especie-input {
  cursor: default;
}
.admin-metodo-especie-input:disabled {
  background: var(--color-surface);
  color: var(--color-muted);
  -webkit-text-fill-color: var(--color-muted);
  cursor: not-allowed;
}
.admin-metodo-linha--desativado .admin-bairro-remover-icon {
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

.admin-bairros-vazio,
.admin-metodos-vazio {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  padding: 0;
}

.admin-bairros-grupo,
.admin-metodos-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-bairro-btn-adicionar {
  flex: unset;
  width: 100%;
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  box-sizing: border-box;
}

.admin-bairro-adicionar-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: var(--color-text);
  mask: url('/ui/adicionar-caixa.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/adicionar-caixa.svg') center / contain no-repeat;
}

.categoria-pill[disabled] {
  cursor: default;
  pointer-events: none;
}

.admin-ver-loja {
  text-decoration: none;
  color: var(--color-muted);
}

.admin-whatsapp-wrap {
  display: flex;
  align-items: stretch;
  height: var(--field-height);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.admin-whatsapp-wrap:focus-within,
.admin-whatsapp-wrap:hover {
  border-color: var(--color-primary);
}

.admin-whatsapp-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-bg);
  border-right: var(--field-divider);
  user-select: none;
}

.admin-whatsapp-wrap .carrinho-campo-input {
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
}

.admin-whatsapp-wrap .carrinho-campo-input:focus {
  border-color: transparent;
}

/* ---- Tema de cor ----------------------------------------- */

.admin-cores-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-cor-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.admin-cor-rotulo {
  font-size: 11px;
  color: var(--color-muted);
  padding: 0 var(--field-padding);
  white-space: nowrap;
  user-select: none;
  align-self: center;
  flex-shrink: 0;
}

.admin-cor-wrap {
  display: flex;
  align-items: stretch;
  height: var(--field-height);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.admin-cor-swatch {
  display: flex;
  align-items: center;
  width: var(--space-4);
  flex-shrink: 0;
  background: var(--color-primary);
  border-right: var(--field-divider);
  transition: background var(--transition-fast);
}

.admin-cor-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--field-padding);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-bg);
  user-select: none;
  flex-shrink: 0;
}

.admin-cor-wrap .carrinho-campo-input {
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding-left: 0;
  font-family: monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-cor-wrap .carrinho-campo-input:focus {
  border-color: transparent;
}

.admin-cor-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-red);
  min-height: var(--field-height);
  margin: 0;
  line-height: 1.4;
}

.admin-cor-aviso::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-red);
  mask: url('/ui/aviso.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/aviso.svg') center / contain no-repeat;
}

.admin-recarregar-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--color-muted);
  margin: var(--space-2) 0;
  line-height: 1.4;
}

.admin-recarregar-aviso::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--color-muted);
  mask: url('/ui/aviso.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/aviso.svg') center / contain no-repeat;
}

.admin-horario-aviso {
  margin-top: 0;
}

.toast--erro {
  background: var(--color-red);
  color: var(--color-white);
}

.toast--sucesso {
  background: var(--color-green);
  color: var(--color-white);
}

/* Âmbar — tipo de toast de atenção (ex.: pedido reaberto/pendente). Texto branco
   (mesmo padrão de sucesso/erro). */
.toast--aviso {
  background: var(--color-yellow);
  color: var(--color-white);
}

/* --- ADMIN — Produtos ------------------------------------------ */

.admin-produtos-categoria-titulo {
  font-size: var(--font-lg);
  font-weight: 600;
  padding: 0 0 4px;
  margin: 0;
}

.admin-produto-item + .admin-produtos-categoria-titulo {
  margin-top: var(--space-2);
}

.admin-produto-item {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-produto-item:last-child,
.admin-produto-item--ultimo {
  border-bottom: none;
}

.admin-produto-foto {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.admin-produto-foto--emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  box-sizing: border-box;
  font-variant-emoji: emoji;
}

.admin-produto-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
}

.admin-produto-nome {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: pretty;
}

.admin-produto-codigo {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
}

#admin-painel-produtos .item-preco-wrap {
  line-height: 1;
  gap: 4px;
}

#admin-painel-produtos .item-preco {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

#admin-painel-produtos .item-preco-original {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

#admin-painel-produtos .item-preco-a-partir-label {
  line-height: 1;
  white-space: nowrap;
}

.admin-produto-btn-editar {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: var(--font-sm);
  padding: var(--field-padding);
  border: var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text);
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.admin-produto-btn-editar:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.admin-editar-icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-text);
  mask: url('/ui/editar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/editar.svg') center / contain no-repeat;
  flex-shrink: 0;
}

.admin-campo-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.admin-preco-preview {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  text-align: right;
  white-space: nowrap;
}

.admin-valor-wrap,
.admin-desconto-wrap {
  display: flex;
  align-items: stretch;
  height: var(--field-height);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.admin-valor-wrap:focus-within,
.admin-desconto-wrap:focus-within,
.admin-valor-wrap:hover,
.admin-desconto-wrap:hover {
  border-color: var(--color-primary);
}

.admin-valor-prefix {
  display: flex;
  align-items: center;
  padding: 0 var(--field-padding);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  border-right: var(--field-divider);
  flex-shrink: 0;
  user-select: none;
}

.admin-desconto-suffix {
  display: flex;
  align-items: center;
  padding: 0 var(--field-padding);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  border-left: var(--field-divider);
  flex-shrink: 0;
  user-select: none;
}

.admin-valor-wrap .carrinho-campo-input,
.admin-desconto-wrap .carrinho-campo-input {
  height: 100%;
  border: none;
  border-radius: 0;
  padding: 0 var(--field-padding);
  background: transparent;
  flex: 1;
  min-width: 0;
}

.admin-valor-wrap .carrinho-campo-input:focus,
.admin-desconto-wrap .carrinho-campo-input:focus {
  border-color: transparent;
}

.admin-foto-preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.admin-foto-preview[src=""] { display: none; }

.admin-foto-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: var(--color-surface);
  font-variant-emoji: emoji;
}

.admin-foto-acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline);
  margin-top: var(--gap-inline);
}

.admin-foto-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  height: var(--field-height);
  padding: 0 var(--field-padding);
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--button-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.admin-foto-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.admin-foto-btn-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  flex-shrink: 0;
  background-color: var(--color-text);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}

.admin-foto-btn-icon--imagem {
  -webkit-mask-image: url('/ui/imagem.svg');
  mask-image: url('/ui/imagem.svg');
}

.admin-foto-btn-icon--camera {
  -webkit-mask-image: url('/ui/camera.svg');
  mask-image: url('/ui/camera.svg');
}

.admin-foto-btn-icon--ajustar {
  -webkit-mask-image: url('/ui/ajustar.svg');
  mask-image: url('/ui/ajustar.svg');
}

.admin-foto-btn-icon--subir {
  -webkit-mask-image: url('/ui/subir.svg');
  mask-image: url('/ui/subir.svg');
}

.admin-foto-btn-icon--descer {
  -webkit-mask-image: url('/ui/descer.svg');
  mask-image: url('/ui/descer.svg');
}

.admin-foto-btn-icon--lixeira {
  -webkit-mask-image: url('/ui/lixeira.svg');
  mask-image: url('/ui/lixeira.svg');
}

.admin-foto-btn-icon--duplicar {
  -webkit-mask-image: url('/ui/duplicar.svg');
  mask-image: url('/ui/duplicar.svg');
}

.admin-foto-btn-icon--limpar {
  -webkit-mask-image: url('/ui/limpar.svg');
  mask-image: url('/ui/limpar.svg');
}

.admin-foto-btn:disabled,
.admin-foto-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-foto-btn:disabled:hover,
.admin-foto-btn[aria-disabled="true"]:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.btn--carregando {
  position: relative;
}

.btn--carregando > *:not(.btn-spinner) {
  visibility: hidden;
}

.btn--carregando::after,
.btn--carregando::before {
  visibility: hidden;
}

.btn--carregando:disabled,
button[aria-busy="true"]:disabled {
  opacity: 1;
  cursor: default;
}

.btn-spinner {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
}

.btn--carregando .btn-spinner {
  display: flex;
}

.btn-spinner > span {
  width: 7px;
  height: 7px;
  background-color: currentColor;
  -webkit-mask: url('/ui/circulo.svg') center / 400% 400% no-repeat;
  mask: url('/ui/circulo.svg') center / 400% 400% no-repeat;
  opacity: 0.3;
  animation: btn-spinner-pulsar 1.2s ease-in-out infinite both;
}

.btn-spinner > span:nth-child(2) { animation-delay: 0.15s; }
.btn-spinner > span:nth-child(3) { animation-delay: 0.30s; }

@keyframes btn-spinner-pulsar {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40%          { opacity: 1;   transform: scale(1.3); }
}

@media (max-width: 520px) {
  .admin-foto-btn[data-label-short] .btn-label {
    display: none;
  }

  .admin-foto-btn[data-label-short]::after {
    content: attr(data-label-short);
  }
}

.admin-tipo-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-inline);
}

.admin-tipo-toggle label,
.admin-etapa-tipo label {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-width: 0;
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

.admin-tipo-toggle label:has(input:checked),
.admin-etapa-tipo label:has(input:checked),
.admin-tipo-toggle label:hover,
.admin-etapa-tipo label:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.admin-tipo-toggle input,
.admin-etapa-tipo input {
  width: var(--icon-md);
  height: var(--icon-md);
  margin: 0;
  flex: 0 0 var(--icon-md);
}

.admin-etapas-editor,
.admin-regras-editor {
  gap: 10px;
}

.admin-etapas-editor > .cfg-descricao,
.admin-regras-editor > .cfg-descricao {
  margin: -4px 0 0;
}

.admin-etapas-lista:empty,
.admin-regras-lista:empty {
  display: none;
}

.admin-etapas-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-etapa-bloco {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
}

.admin-etapa-bloco--movida-cima {
  animation: admin-etapa-move-cima var(--transition-medium) both;
}

.admin-etapa-bloco--movida-baixo {
  animation: admin-etapa-move-baixo var(--transition-medium) both;
}

@keyframes admin-etapa-move-cima {
  from {
    opacity: 0.88;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes admin-etapa-move-baixo {
  from {
    opacity: 0.88;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-etapa-header,
.admin-etapa-acoes {
  display: flex;
}

.admin-etapa-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--btn-circular-sm);
  grid-template-rows: auto;
  min-height: var(--field-height);
  align-items: center;
  column-gap: var(--gap-inline);
  row-gap: var(--gap-inline);
  /* Respiro vertical de 10px (padrão --field-padding) acima/abaixo do conteúdo. */
  padding: var(--field-padding);
  box-sizing: border-box;
}

.admin-etapa-toggle,
.admin-regra-toggle {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
  min-height: var(--field-height);
  border: none;
  background: transparent;
  padding: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

/* A caixa do número acompanha a altura do bloco título+subtítulo (nunca menor
   que --field-height), ficando com 5px de respiro via o padding do cabeçalho. */
.admin-etapa-indice,
.admin-regra-indice {
  width: var(--field-height);
  height: auto;
  min-height: var(--field-height);
  align-self: stretch;
  border: var(--button-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.admin-etapa-titulo-wrap,
.admin-regra-titulo-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-tight);
}

.admin-etapa-titulo,
.admin-regra-titulo {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-etapa-resumo,
.admin-regra-resumo {
  font-size: 12px;
  line-height: 1.25;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-etapa-bloco--aberta .cfg-accordion-seta,
.admin-regra-bloco--aberta .cfg-accordion-seta {
  transform: rotate(180deg);
}

.admin-etapa-acoes {
  grid-column: 2;
  grid-row: 1;
  align-items: stretch;
  flex-shrink: 0;
  gap: var(--gap-inline);
  height: var(--field-height);
}

.admin-etapa-acao-btn {
  flex: 0 0 auto;
  min-height: var(--field-height);
  height: var(--field-height);
  min-width: 84px;
  padding: 0 var(--field-padding);
  box-sizing: border-box;
  line-height: 1;
}

.admin-etapa-seta-btn,
.admin-regra-seta-btn {
  grid-column: 3;
  grid-row: 1;
  width: var(--btn-circular-sm);
  align-self: center;
  height: var(--field-height);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.admin-etapa-seta-btn:hover,
.admin-etapa-seta-btn:active,
.admin-regra-seta-btn:hover,
.admin-regra-seta-btn:active {
  background: transparent;
}

.admin-etapa-content,
.admin-regra-content {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-etapa-bloco--aberta .admin-etapa-content,
.admin-regra-bloco--aberta .admin-regra-content {
  grid-template-rows: 1fr;
}

.admin-etapa-inner,
.admin-regra-inner {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--field-padding);
  transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-etapa-bloco--aberta .admin-etapa-inner,
.admin-regra-bloco--aberta .admin-regra-inner {
  padding-top: var(--field-padding);
  padding-bottom: var(--field-padding);
}

.admin-etapa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.admin-etapa-tipo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-inline);
}

.admin-etapa-tipo label {
  box-sizing: border-box;
}

.admin-etapa-tipo input[type="radio"] {
  width: var(--icon-md);
  height: var(--icon-md);
  margin: 0;
  flex: 0 0 var(--icon-md);
  align-self: center;
  vertical-align: middle;
}

.admin-etapa-secao {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.admin-etapa-regras {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-inline);
}

.admin-etapa-numero {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  min-height: var(--field-height);
  height: var(--field-height);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
}

.admin-etapa-numero .carrinho-campo-input {
  height: var(--field-height);
  box-sizing: border-box;
  width: 80px;
  padding: 0 var(--field-padding);
}

.admin-etapa-obrigatoria-label {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  font-size: 13px;
  font-weight: 600;
  min-height: var(--field-height);
  cursor: pointer;
}

.admin-etapa-regras-numeros {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-etapa-limite-campo {
  gap: var(--gap-inline);
}

/* Na seção "Quantidade de opções", o label de obrigatoriedade não usa altura
   mínima de campo — assim o checkbox fica a 10px do título "Quantidade de opções"
   (o gap da seção), não centralizado num bloco de 40px. */
.admin-etapa-regras .admin-etapa-obrigatoria-label {
  min-height: 0;
}

/* Sobrescreve o padding lateral do .admin-regra-limite-control herdado
   (especificidade de 2 classes para vencer a regra definida depois no CSS). */
.admin-etapa-regras .admin-regra-limite-control {
  width: fit-content;
  padding: 0;
  /* Sem a altura fixa de 40px: o controle acompanha a altura dos botões −/+ (26px),
     sem espaço extra acima deles (mantém 10px do label "Mínimo"/"Máximo"). */
  height: auto;
}

.admin-etapa-regras .admin-regra-limite {
  height: 26px;
}

.admin-etapa-regra-controlada {
  margin: 0;
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-etapa-limite-controlado {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 26px;
}

.admin-etapa-regra-resumo {
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.35;
}

.admin-etapa-regra-unica {
  margin: 0;
  padding: var(--field-padding);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-etapa-opcoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Aproxima o título "Opções da etapa" do primeiro conteúdo (10px) sem reduzir
   o espaçamento entre opções (20px). Negativa o gap só nesse par. */
.admin-etapa-opcoes > .carrinho-campo-label + * {
  margin-top: calc(var(--gap-inline) - var(--space-2));
}

.admin-etapa-opcao .admin-bairro-nome,
.admin-etapa-opcao .admin-bairro-taxa-wrap,
.admin-etapa-adicionar-opcao {
  min-height: var(--field-height);
  height: var(--field-height);
  box-sizing: border-box;
}

/* Linha de opção empilhada: nome, valor, descrição, foto e barra de ações,
   cada bloco ocupando a largura toda (até a margem). */
.admin-etapa-opcao.admin-bairro-linha {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-inline);
}

.admin-etapa-opcao.admin-bairro-linha:not(:last-child) {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.admin-opcao-foto-linha {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
}

/* Barra de ações da opção: Apagar à esquerda, Duplicar à direita. */
.admin-opcao-acoes {
  display: flex;
  gap: var(--gap-inline);
}

.admin-opcao-acao {
  flex: 1;
  min-width: 0;
  height: var(--field-height);
  min-height: var(--field-height);
}

.admin-opcao-foto-acoes {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: var(--field-height) var(--field-height);
  gap: var(--gap-inline);
}

.admin-opcao-foto-acoes .admin-foto-btn {
  font-size: 12px;
  line-height: 1.1;
  gap: 6px;
  padding: 0 6px;
}

.admin-opcao-foto-preview-wrap {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-opcao-foto-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.admin-opcao-foto-preview-wrap.tem-foto .admin-opcao-foto-preview { display: block; }
.admin-opcao-foto-preview-wrap.tem-foto .admin-opcao-foto-placeholder { display: none; }

.admin-opcao-foto-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-variant-emoji: emoji;
}

/* No empilhamento vertical, o nome não deve crescer no eixo da coluna. */
.admin-etapa-opcao .admin-bairro-nome {
  flex: 0 0 auto;
  width: 100%;
  padding-left: var(--field-padding);
  padding-right: var(--field-padding);
  padding-top: 0;
  padding-bottom: 0;
}

.admin-etapa-opcao .admin-bairro-taxa-wrap {
  width: 100%;
}

/* O campo de valor agora ocupa a largura toda (não mais 64px). */
.admin-etapa-opcao .admin-bairro-taxa-input {
  flex: 1;
  width: auto;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

/* O textarea da descrição é envolvido por .admin-campo-contador-wrap (campo +
   contador abaixo, à direita); o wrapper ocupa a largura toda. */
.admin-etapa-opcao .admin-campo-contador-wrap {
  width: 100%;
}

.admin-opcao-descricao {
  height: calc(var(--field-height) * 2);
  min-height: calc(var(--field-height) * 2);
  padding: var(--field-padding);
  resize: none;
  box-sizing: border-box;
  line-height: 1.35;
}

.admin-etapa-adicionar-opcao {
  padding-top: 0;
  padding-bottom: 0;
}

/* Entrada sutil de uma opção recém-duplicada: surge com leve deslize e um
   realce de fundo que se dissolve. */
.admin-etapa-opcao--nova {
  animation: admin-opcao-entrada 0.35s cubic-bezier(0.22, 1, 0.36, 1) both,
             admin-opcao-realce 1.1s ease-out 0.05s both;
}
@keyframes admin-opcao-entrada {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes admin-opcao-realce {
  0%   { background: var(--color-surface-hover); }
  100% { background: transparent; }
}

/* Corpo de edição que aparece após escolher o Tipo (etapa) ou Tipo de regra.
   Mantém o mesmo respiro vertical das seções (substitui o gap do --inner que antes
   ficava entre os filhos diretos) e entra com um fade/slide sutil quando revelado. */
.admin-etapa-corpo,
.admin-regra-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.admin-etapa-corpo--revelar,
.admin-regra-corpo--revelar {
  animation: admin-corpo-revelar 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes admin-corpo-revelar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.admin-etapas-vazio {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-2);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-etapas-vazio p {
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}

.admin-etapas-vazio span {
  display: block;
}

.admin-etapas-vazio--opcoes {
  padding: var(--field-padding);
}

.admin-etapa-adicionar,
.admin-etapa-adicionar-opcao,
.admin-regra-adicionar {
  width: 100%;
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  box-sizing: border-box;
}

.admin-etapa-regras-relacionadas {
  margin-top: 0;
}

.admin-etapa-regras-relacionadas .carrinho-campo-label {
  margin: 0 0 var(--field-padding);
}

.admin-etapa-regras-relacionadas-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text);
}

.admin-etapa-regras-relacionadas-lista li {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  margin: 0;
}

.admin-etapa-regras-relacionadas-lista li::before {
  content: '•';
  flex: 0 0 auto;
}

.admin-etapa-regras-relacionadas-lista li > span {
  min-width: 0;
}

.admin-etapa-regras-relacionadas .cfg-descricao {
  margin: 0;
  font-size: 12px;
}

.admin-regras-editor {
  display: flex;
  flex-direction: column;
}

.admin-regras-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-regras-vazio {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  padding: var(--space-2);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 13px;
  line-height: 1.4;
}

.admin-regras-vazio p {
  margin: 0;
  color: var(--color-text);
  font-weight: 700;
}

.admin-regra-bloco {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  overflow: hidden;
  transition: border-color var(--transition-medium);
}

/* Status da regra: verde = configuração completa; vermelho = pendências a resolver.
   Sem tipo escolhido ainda, mantém a borda neutra (cinza padrão). */
.admin-regra-bloco--ok {
  border-color: var(--color-green);
}
.admin-regra-bloco--pendente {
  border-color: var(--color-red);
}

.admin-regra-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--btn-circular-sm);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--gap-inline);
  row-gap: var(--gap-inline);
  padding: var(--field-padding);
  box-sizing: border-box;
}

/* A seta abre/fecha; fica na linha 1 à direita. */
.admin-regra-seta-btn {
  grid-column: 2;
  grid-row: 1;
}

/* Linha de ações da regra (Redefinir | Excluir), dividida simetricamente. */
.admin-regra-acoes {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  gap: var(--gap-inline);
}

.admin-regra-acao {
  flex: 1;
  min-width: 0;
  min-height: var(--field-height);
  height: var(--field-height);
  padding: 0 var(--field-padding);
  box-sizing: border-box;
  line-height: 1;
}

.admin-regra-bloco .carrinho-campo-input,
.admin-regra-bloco .carrinho-campo-select,
.admin-regra-adicionar {
  height: var(--field-height);
  min-height: var(--field-height);
  box-sizing: border-box;
}

.admin-regra-bloco .carrinho-campo-input {
  padding-left: var(--field-padding);
  padding-right: var(--field-padding);
  padding-top: 0;
  padding-bottom: 0;
}

.admin-regra-bloco .carrinho-campo-select {
  padding-left: var(--field-padding);
  padding-right: calc(var(--field-padding) + var(--icon-lg) + var(--gap-inline));
  padding-top: 0;
  padding-bottom: 0;
}


.admin-regra-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.admin-regra-tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 13px;
}

.admin-regra-tabela thead th {
  text-align: left;
  height: var(--field-height);
  padding: 0 var(--field-padding);
  background: var(--color-bg);
  border: none;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
}

.admin-regra-tabela thead th + th,
.admin-regra-tabela tbody td {
  border-left: 1px solid var(--color-border);
}

.admin-regra-tabela thead th + th {
  text-align: center;
}

.admin-regra-tabela tbody th {
  text-align: left;
  height: var(--field-height);
  padding: 0 var(--field-padding);
  border: none;
  border-top: 1px solid var(--color-border);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg);
}

.admin-regra-tabela tbody td {
  height: var(--field-height);
  padding: 0 var(--field-padding);
  border-top: 1px solid var(--color-border);
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.admin-regra-tabela tbody tr:first-child th,
.admin-regra-tabela tbody tr:first-child td {
  border-top: none;
}

.admin-regra-limite {
  min-width: 0;
  width: 2ch;
  height: var(--field-height);
  border: none;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

.admin-regra-limite::-webkit-outer-spin-button,
.admin-regra-limite::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.admin-regra-limite-control {
  height: var(--field-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  padding: 0;
  box-sizing: border-box;
}

.admin-regra-limite-btn {
  width: 28px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--button-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  background: var(--color-surface);
  cursor: pointer;
  padding: 0;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
}

.admin-regra-limite-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.admin-regra-limite-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.admin-regra-limite-btn:disabled:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.admin-regra-limite-btn-icon {
  width: 18px;
  height: 18px;
  display: block;
  background-color: var(--color-text);
}

.admin-regra-limite-btn-icon--remover {
  mask: url('/ui/remover.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/remover.svg') center / contain no-repeat;
}

.admin-regra-limite-btn-icon--adicionar {
  mask: url('/ui/adicionar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/adicionar.svg') center / contain no-repeat;
}

/* Wrapper de scroll horizontal — matriz de preço por combinação pode ficar larga
   quando há muitas opções em qualquer das etapas. */
.admin-regra-tabela-wrap {
  overflow-x: auto;
  width: 100%;
}

.admin-regra-tabela--matriz tbody td {
  width: auto;
  min-width: 90px;
  padding: var(--field-padding);
}

.admin-regra-tabela--matriz thead th {
  min-width: 90px;
  text-align: center;
  line-height: 1.25;
}

.admin-regra-tabela--matriz thead th:first-child,
.admin-regra-tabela--matriz tbody th {
  min-width: 110px;
  text-align: left;
  line-height: 1.25;
}

.admin-regra-tabela--matriz .admin-regra-preco {
  width: 100%;
  min-width: 0;
  height: var(--field-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  padding: 0 var(--field-padding);
  box-sizing: border-box;
}

.admin-regra-tabela--matriz .admin-regra-preco:focus,
.admin-regra-tabela--matriz .admin-regra-preco:hover {
  outline: none;
  border-color: var(--color-primary);
}

/* Regra de visibilidade — reaproveita radios (.admin-etapa-tipo) e checkboxes
   (.admin-etapa-obrigatoria-label) das etapas; só ajusta layout/espaçamento. */
.admin-regra-visibilidade {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-regra-vis-radios {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-regra-opcoes-lista {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

/* Nas listas de checkboxes das regras (gatilhos, opções afetadas e controladoras),
   os labels não usam a altura mínima de campo — assim a distância entre cada opção
   fica igual ao gap de 10px. */
.admin-regra-opcoes-lista .admin-etapa-obrigatoria-label {
  min-height: 0;
}

/* Lista de controladoras (regra de preço com múltiplas controladoras):
   agrupa os checkboxes para leitura como "selecione uma ou mais etapas". */
.admin-regra-ctrl-lista {
  padding: var(--field-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

@media (max-width: 620px) {
  .admin-regra-campos {
    grid-template-columns: 1fr;
  }
  .admin-regra-vis-radios {
    grid-template-columns: 1fr;
  }
  .admin-regra-tabela tbody td {
    width: 148px;
  }
  .admin-regra-tabela--matriz tbody td,
  .admin-regra-tabela--matriz thead th {
    min-width: 80px;
  }
  .admin-regra-tabela--matriz thead th:first-child,
  .admin-regra-tabela--matriz tbody th {
    min-width: 100px;
  }
}

@media (max-width: 620px) {
  .admin-tipo-toggle,
  .admin-etapa-tipo {
    grid-template-columns: 1fr;
  }

  .admin-etapa-header {
    grid-template-columns: minmax(0, 1fr) var(--btn-circular-sm);
    grid-template-rows: minmax(var(--field-height), auto) var(--field-height);
    column-gap: var(--gap-inline);
    row-gap: var(--gap-inline);
    padding: var(--field-padding);
  }

  .admin-etapa-acoes {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .admin-etapa-seta-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-etapa-acao-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---- Categorias: lista ------------------------------------- */

#admin-categorias-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.admin-categoria-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--field-padding) 0;
}

.admin-categoria-item::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--space-2) / -2);
  border-bottom: 1px solid var(--color-border);
}

.admin-categoria-item:first-child { padding-top: 0; }
.admin-categoria-item:last-child::after { display: none; }

.admin-categoria-icone {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  font-variant-emoji: emoji;
}

.admin-categoria-acoes {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  flex-shrink: 0;
  margin-left: auto;
}

.admin-cat-mover-btn,
.admin-produto-toggle-visivel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--field-padding);
  border: var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text);
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.admin-cat-mover-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}
.admin-cat-mover-btn:disabled,
.admin-produto-toggle-visivel:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Toggle de visibilidade do produto: status visual (verde = visível, vermelho = oculto).
   Borda na cor do estado (verde/vermelho escuro), como em "Salvar"/"Excluir". */
.admin-produto-toggle-visivel {
  color: #fff;
}
.admin-produto-toggle-visivel--ativo {
  background: var(--color-green);
  border-color: var(--color-green-hover);
}
.admin-produto-toggle-visivel--oculto {
  background: var(--color-red);
  border-color: var(--color-red-hover);
}
/* Escurecimento só com mouse (hover: hover) — ver nota em .admin-disponivel-wrap. */
@media (hover: hover) {
  .admin-produto-toggle-visivel--ativo:hover:not(:disabled) {
    background: var(--color-green-hover);
  }
  .admin-produto-toggle-visivel--oculto:hover:not(:disabled) {
    background: var(--color-red-hover);
  }
}
.admin-produto-toggle-icon-wrap {
  position: relative;
  width: var(--icon-md);
  height: var(--icon-md);
}
.admin-produto-toggle-icon {
  position: absolute;
  /* Glifo ~16px (estende além da caixa de 14px em fluxo, sem alterar a altura
     do botão) para compensar o "respiro" interno do visivel.svg, que preenche
     só ~78% do viewBox. Não maior que isso porque a diagonal do invisivel.svg
     (estado vermelho) vai de canto a canto e ficaria maior que o lápis do "Editar". */
  inset: -1px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: opacity var(--transition-fast);
}
.admin-produto-toggle-icon--vis {
  -webkit-mask-image: url('/ui/visivel.svg');
  mask-image: url('/ui/visivel.svg');
  opacity: 0;
}
.admin-produto-toggle-icon--invis {
  -webkit-mask-image: url('/ui/invisivel.svg');
  mask-image: url('/ui/invisivel.svg');
  opacity: 1;
}
.admin-produto-toggle-visivel--ativo .admin-produto-toggle-icon--vis  { opacity: 1; }
.admin-produto-toggle-visivel--ativo .admin-produto-toggle-icon--invis { opacity: 0; }
.admin-cat-mover-icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: currentColor;
  -webkit-mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
  mask: url('/ui/seta-baixo.svg') center / contain no-repeat;
}
.admin-cat-mover-icon--cima { transform: rotate(180deg); }

.admin-categoria-item--movida-cima {
  animation: admin-categoria-move-cima var(--transition-medium) both;
}
.admin-categoria-item--movida-baixo {
  animation: admin-categoria-move-baixo var(--transition-medium) both;
}
@keyframes admin-categoria-move-cima {
  from { opacity: 0.88; transform: translateY(10px); }
  to   { opacity: 1;    transform: translateY(0); }
}
@keyframes admin-categoria-move-baixo {
  from { opacity: 0.88; transform: translateY(-10px); }
  to   { opacity: 1;    transform: translateY(0); }
}

.admin-categoria-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
  min-width: 0;
}

.admin-categoria-nome {
  font-weight: 600;
  font-size: var(--font-lg);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-categoria-slug {
  font-size: var(--font-sm);
  color: var(--color-muted);
  font-family: monospace;
}

.admin-categoria-count {
  font-size: var(--font-sm);
  line-height: 1;
  color: var(--color-muted);
}

.admin-cat-itens-lista {
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.admin-cat-item-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline);
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.admin-cat-item-linha:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.admin-cat-item-linha:hover { background: var(--color-surface-hover); }

.admin-cat-item-nome {
  font-size: 14px;
  flex: 1;
}

.admin-categoria-slug-readonly {
  display: flex;
  align-items: center;
  height: var(--field-height);
  margin: 0;
  font-family: monospace;
  font-size: 13px;
  color: var(--color-muted);
  padding: 0 var(--field-padding);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.admin-cat-icone-novo::placeholder {
  opacity: 0.5;
}

/* ---- Pedidos (registro dos pedidos do WhatsApp) ---------- */

.admin-pedidos-vazio {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  padding: 0;
}
/* Lista vazia sai do fluxo (e leva junto o gap de 20px do .carrinho-rodape): o estado
   vazio encosta nos 30px do cabeçalho, como as outras seções. */
#admin-pedidos-lista:empty {
  display: none;
}

/* Accordion por dia: reusa .cfg-accordion. Rótulo do dia + contagem. */
.admin-pedidos-dia .cfg-accordion-header .carrinho-campo-label {
  font-size: var(--font-lg);
  font-weight: 600;
  text-transform: capitalize;
}
.admin-pedidos-dia-contagem {
  margin-left: auto;
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 2px 10px;
}
/* Espaçamento entre cards de pedido dentro do dia. */
.admin-pedidos-dia-inner {
  gap: var(--space-2);
}
.admin-pedidos-dia-inner > :first-child {
  margin-top: var(--space-2);
}

.admin-pedido-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* Entrada sutil de um pedido recém-chegado (polling): desliza + aparece, com um
   realce suave que esvanece pra chamar o olhar do lojista. */
.admin-pedido-item--novo {
  animation: admin-pedido-entrada 0.5s cubic-bezier(0.22, 1, 0.36, 1) both,
             admin-pedido-realce 1.8s ease-out 0.1s both;
}
@keyframes admin-pedido-entrada {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes admin-pedido-realce {
  0%   { background: var(--color-surface-hover); }
  100% { background: var(--color-bg); }
}

.admin-pedido-topo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.admin-pedido-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.admin-pedido-codigo {
  font-size: var(--font-lg);
  font-weight: 700;
  color: var(--color-text);
}
/* Ícone de seção (reutilizável): herda a cor do título via currentColor. */
.admin-pedido-sec-icone {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: currentColor;
}
.admin-pedido-sec-icone--recibo {
  /* recibo.svg é mais alto que largo: alinha à esquerda p/ o glifo encostar na margem. */
  mask: url('/ui/recibo.svg') left center / contain no-repeat;
  -webkit-mask: url('/ui/recibo.svg') left center / contain no-repeat;
}
.admin-pedido-data {
  font-size: var(--font-sm);
  color: var(--color-muted);
}
.admin-pedido-status {
  margin-left: auto;
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.admin-pedido-status--pendente  { background: var(--color-yellow); color: #fff; }
.admin-pedido-status--concluido { background: var(--color-green); color: #fff; }
.admin-pedido-status--cancelado { background: var(--color-red);   color: #fff; }

/* Tag "Novo" persistente: fica no card até o lojista tratar o pedido (clicar num status). */
.admin-pedido-novo-tag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* Toggle de som de novo pedido (cabeçalho da seção Pedidos). Ícone troca por aria-pressed:
   notificacao-ativada (ligado) / notificacao-desativada (desligado). */
.admin-som-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-circular-sm);
  height: var(--btn-circular-sm);
  flex-shrink: 0;
  border: 1.5px solid var(--color-text);
  border-radius: 50%;
  background: var(--color-text);
  cursor: pointer;
  line-height: 1;
  transition: border-color var(--transition-fast),
              opacity var(--transition-fast);
}
@media (hover: hover) {
  .admin-som-toggle:hover { border-color: var(--color-primary); }
}
.admin-som-toggle[aria-pressed="false"] { opacity: 0.45; }

.admin-som-toggle-icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: #fff;
  -webkit-mask: url('/ui/notificacao-ativada.svg') center / contain no-repeat;
  mask: url('/ui/notificacao-ativada.svg') center / contain no-repeat;
}
.admin-som-toggle[aria-pressed="false"] .admin-som-toggle-icon {
  -webkit-mask-image: url('/ui/notificacao-desativada.svg');
  mask-image: url('/ui/notificacao-desativada.svg');
}

.admin-pedido-divergencia {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-red) 28%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-red) 8%, #fff);
  font-size: var(--font-sm);
  font-weight: 600;
  color: var(--color-red);
}

.admin-pedido-item--divergencia {
  border-color: color-mix(in srgb, var(--color-red) 42%, var(--border-color));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-red) 18%, transparent);
}

.admin-pedido-resumo {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
.admin-pedido-resumo-titulo { font-size: 13px; font-weight: 600; }
.admin-pedido-itens {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-pedido-linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}
.admin-pedido-item-qtd  { font-weight: 700; color: var(--color-muted); }
.admin-pedido-item-nome { font-weight: 600; min-width: 0; color: var(--color-muted); }
.admin-pedido-item-preco { font-weight: 600; white-space: nowrap; }
.admin-pedido-item-opcoes {
  grid-column: 2 / 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  font-size: var(--font-sm);
  color: var(--color-muted);
  line-height: 1.3;
}

.admin-pedido-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.admin-pedido-meta-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}
.admin-pedido-meta-linha {
  display: flex;
  align-items: baseline;
  gap: var(--gap-inline);
}
.admin-pedido-meta-rotulo { font-size: 13px; font-weight: 600; }
.admin-pedido-meta-valor { font-size: 13px; font-weight: 600; margin-left: auto; white-space: nowrap; }
.admin-pedido-meta-sub    { font-size: var(--font-sm); color: var(--color-muted); }

.admin-pedido-total {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.admin-pedido-total-principal {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}
.admin-pedido-total-label {
  font-size: var(--font-lg);
  font-weight: 700;
  line-height: 1.2;
}
.admin-pedido-total-valor { font-size: var(--font-lg); font-weight: 700; margin-left: auto; }
.admin-pedido-total-detalhes {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
  font-size: var(--font-sm);
  color: var(--color-muted);
}

.admin-pedido-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}
/* Cada linha de ações: filhos com largura igual (4 em cima, 2 embaixo). */
.admin-pedido-acoes-linha {
  display: flex;
  align-items: stretch;
  gap: var(--gap-inline);
  min-width: 0;
}
.admin-pedido-acoes-linha > * {
  flex: 1 1 0;
  min-width: 0;
}
.admin-pedido-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 6px;
  box-sizing: border-box;
  border: var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}
.admin-pedido-status-icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-muted);
}
.admin-pedido-status-btn--pendente  .admin-pedido-status-icon {
  width: var(--icon-md);
  height: var(--icon-md);
  mask: url('/ui/pendente.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/pendente.svg') center / contain no-repeat;
}
.admin-pedido-status-btn--concluido .admin-pedido-status-icon {
  width: 12px;
  height: 12px;
  mask: url('/ui/concluido.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/concluido.svg') center / contain no-repeat;
}
.admin-pedido-status-btn--cancelado .admin-pedido-status-icon {
  /* fechar.svg tem margem interna e lê menor — um pouco acima do token grande p/ casar com os demais. */
  width: calc(var(--icon-lg) + 2px);
  height: calc(var(--icon-lg) + 2px);
  mask: url('/ui/fechar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/fechar.svg') center / contain no-repeat;
}
@media (hover: hover) {
  .admin-pedido-status-btn:hover:not(.ativo) {
    background: var(--color-surface-hover);
    border-color: var(--color-primary);
  }
}
.admin-pedido-item--atualizando .admin-pedido-status-btn { opacity: 0.7; }
.admin-pedido-status-btn.ativo .admin-pedido-status-icon { background-color: #fff; }
.admin-pedido-status-btn--pendente.ativo  { background: var(--color-yellow); border-color: var(--color-yellow-hover); }
.admin-pedido-status-btn--concluido.ativo { background: var(--color-green);  border-color: var(--color-green-hover);  }
.admin-pedido-status-btn--cancelado.ativo { background: var(--color-red);    border-color: var(--color-red-hover);    }

.admin-pedido-excluir {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--field-height);
  height: var(--field-height);
  padding: 0;
  border: var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
@media (hover: hover) {
  .admin-pedido-excluir:hover { background: var(--color-surface-hover); border-color: var(--color-red); }
  .admin-pedido-excluir:hover .admin-pedido-excluir-icon { background-color: var(--color-red); }
}
.admin-pedido-excluir-icon {
  display: inline-block;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-muted);
  mask: url('/ui/lixeira.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/lixeira.svg') center / contain no-repeat;
}

/* Botões de ação secundária do pedido (compartilhar, baixar recibo): ícone + rótulo,
   na 2ª linha. Hover neutro por não serem destrutivos. */
.admin-pedido-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  height: var(--field-height);
  min-height: var(--field-height);
  padding: 0 10px;
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: 1;
  border: var(--button-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
@media (hover: hover) {
  .admin-pedido-acao:hover { background: var(--color-surface-hover); border-color: var(--color-primary); }
  .admin-pedido-acao:hover .admin-pedido-acao-icon { background-color: var(--color-primary); }
}
.admin-pedido-acao-rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-pedido-acao-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-md);
  height: var(--icon-md);
  background-color: var(--color-muted);
}
.admin-pedido-acao-icon--compartilhar {
  width: 13px;
  height: 13px;
  mask: url('/ui/compartilhar.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/compartilhar.svg') center / contain no-repeat;
}
.admin-pedido-acao-icon--recibo {
  width: 13px;
  height: 13px;
  mask: url('/ui/download.svg') center / contain no-repeat;
  -webkit-mask: url('/ui/download.svg') center / contain no-repeat;
}

/* ---- Disponível para pedidos ----------------------------- */

.admin-disponivel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  width: 100%;
  box-sizing: border-box;
  min-height: var(--field-height);
  padding: 0 var(--field-padding);
  border: var(--button-border-red);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--color-red);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
/* Estado controlado por classe explícita (--on) togglada no JS — não usar
   :has(:checked), que tem invalidação instável com checkbox escondido.
   Borda na cor do estado (verde/vermelho escuro), como em "Salvar"/"Excluir". */
.admin-disponivel-wrap--on {
  background: var(--color-green);
  border-color: var(--color-green-hover);
}
/* Escurecimento só com mouse (hover: hover): em toque, após o tap o botão volta
   direto à cor do novo estado em vez de ficar preso na cor escura até tocar fora. */
@media (hover: hover) {
  .admin-disponivel-wrap:hover:not(.admin-disponivel-wrap--bloqueado):not(:has(.admin-disponivel-cb:disabled)) {
    background: var(--color-red-hover);
  }
  .admin-disponivel-wrap--on:hover:not(.admin-disponivel-wrap--bloqueado):not(:has(.admin-disponivel-cb:disabled)) {
    background: var(--color-green-hover);
  }
}
.admin-disponivel-wrap:has(.admin-disponivel-cb:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-disponivel-wrap .admin-disponivel-cb {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.admin-disponivel-wrap--bloqueado {
  pointer-events: none;
}

.admin-disponivel-texto {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  user-select: none;
}

.admin-disponivel-texto--dis { display: none; }
.admin-disponivel-texto--indis { display: block; }
.admin-disponivel-wrap--on .admin-disponivel-texto--dis { display: block; }
.admin-disponivel-wrap--on .admin-disponivel-texto--indis { display: none; }

/* Ícone: crossfade entre visivel.svg (olho = disponível) e invisivel.svg
   (olho cortado = indisponível), controlado pela classe --on. */
.admin-disponivel-icon-wrap {
  position: relative;
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex-shrink: 0;
}
.admin-disponivel-icon {
  position: absolute;
  inset: 0;
  background-color: #fff;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  transition: opacity var(--transition-fast);
}
.admin-disponivel-icon--vis {
  -webkit-mask-image: url('/ui/visivel.svg');
  mask-image: url('/ui/visivel.svg');
  opacity: 0;
}
.admin-disponivel-icon--invis {
  -webkit-mask-image: url('/ui/invisivel.svg');
  mask-image: url('/ui/invisivel.svg');
  opacity: 1;
}
.admin-disponivel-wrap--on .admin-disponivel-icon--vis  { opacity: 1; }
.admin-disponivel-wrap--on .admin-disponivel-icon--invis { opacity: 0; }

.admin-cat-disponivel-aviso {
  margin: var(--field-padding) 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.admin-produto-disponivel-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.admin-produto-disponivel-wrap:has(.admin-disponivel-cb:disabled) {
  cursor: not-allowed;
}

.admin-categoria-item--inativa {
  opacity: 0.5;
}

/* ---- Overlay de carregamento de página ----------------------------- */

@keyframes overlay-saida {
  to { opacity: 0; }
}

#pagina-overlay {
  position: fixed;
  top: calc(var(--header-h) + 75px);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg);
  z-index: var(--z-overlay);
  pointer-events: none;
  animation: overlay-saida 0.2s ease 0.3s forwards;
}


/* ---- Painel de edição: overlay slide-in (estilo carrinho) ---------- */

.admin-editar-outer {
  position: fixed;
  top: calc(var(--header-h) + 75px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
  background: var(--color-bg);
  z-index: var(--z-header);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}

.admin-editar-outer::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body.modo-editar-admin .admin-editar-outer {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Esconde o painel de fundo durante a edição para evitar artefato de compositing no Android */
body.modo-editar-admin #admin-painel-produtos,
body.modo-editar-admin #admin-painel-categorias {
  visibility: hidden;
}

/* ---- Modal de confirmação -------------------------------- */

.btn-pedir--neutro {
  background: var(--color-surface);
  color: var(--color-text);
  border: var(--button-border);
}
.btn-pedir--neutro:hover:not(:disabled):not(.btn-pedir--fechado) {
  background: var(--color-surface-hover);
  border-color: var(--button-border-hover-color);
}

.admin-confirmacao-backdrop,
.admin-ajuste-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: var(--z-editar);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s;
}

.admin-confirmacao-backdrop.ativa,
.admin-ajuste-backdrop.ativa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-confirmacao,
.admin-ajuste {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transform: translateY(40px);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-ajuste {
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}

.admin-confirmacao-backdrop.ativa .admin-confirmacao,
.admin-ajuste-backdrop.ativa .admin-ajuste {
  transform: translateY(0);
}

.admin-ajuste-backdrop.ativa.admin-ajuste-backdrop--saindo {
  opacity: 0;
}

.admin-ajuste-backdrop.ativa.admin-ajuste-backdrop--saindo .admin-ajuste {
  transform: translateY(40px);
}

.admin-confirmacao-titulo {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

.admin-confirmacao-desc {
  font-size: 13px;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.5;
}

.admin-confirmacao-acoes,
.admin-ajuste-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--gap-inline);
}

.admin-ajuste-area {
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  touch-action: none;
  cursor: grab;
}

.admin-ajuste-area--circle {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12) inset;
}

.admin-ajuste-area:active {
  cursor: grabbing;
}

.admin-ajuste-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}

.admin-ajuste-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  mix-blend-mode: difference;
  background:
    linear-gradient(to right, transparent calc(33.333% - 0.5px), white calc(33.333% - 0.5px), white calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to right, transparent calc(66.666% - 0.5px), white calc(66.666% - 0.5px), white calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
    linear-gradient(to bottom, transparent calc(33.333% - 0.5px), white calc(33.333% - 0.5px), white calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
    linear-gradient(to bottom, transparent calc(66.666% - 0.5px), white calc(66.666% - 0.5px), white calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.admin-ajuste-grade--visivel {
  opacity: 1;
}

.admin-ajuste-zoom {
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
}

.admin-ajuste-zoom-reset {
  flex-shrink: 0;
  width: var(--field-height);
  height: var(--field-height);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.admin-ajuste-zoom-reset:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-surface);
}

.admin-ajuste-zoom-reset:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-ajuste-zoom-icone {
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: currentColor;
  -webkit-mask: url('/ui/lupa.svg') center / contain no-repeat;
  mask: url('/ui/lupa.svg') center / contain no-repeat;
}

.admin-ajuste-zoom input[type="range"] {
  flex: 1;
  width: 100%;
  min-width: 0;
  accent-color: var(--color-primary);
}

.admin-ajuste-rotacionar,
.admin-ajuste-espelhar {
  flex-shrink: 0;
  width: var(--field-height);
  height: var(--field-height);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.admin-ajuste-rotacionar:hover:not(:disabled),
.admin-ajuste-espelhar:hover:not(:disabled) {
  color: var(--color-text);
  background: var(--color-surface);
}

.admin-ajuste-espelhar[aria-pressed="true"]:not(:disabled) {
  color: var(--color-primary);
  background: var(--color-surface);
}

.admin-ajuste-espelhar[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

.admin-ajuste-rotacionar:disabled,
.admin-ajuste-espelhar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.admin-ajuste-rotacionar-icone,
.admin-ajuste-espelhar-icone {
  width: var(--icon-lg);
  height: var(--icon-lg);
  background-color: currentColor;
}

.admin-ajuste-rotacionar-icone {
  -webkit-mask: url('/ui/rotacionar.svg?v=2') center / contain no-repeat;
  mask: url('/ui/rotacionar.svg?v=2') center / contain no-repeat;
}

.admin-ajuste-espelhar-icone {
  -webkit-mask: url('/ui/espelhar.svg') center / contain no-repeat;
  mask: url('/ui/espelhar.svg') center / contain no-repeat;
}