/* ==========================================================
   CARDÁPIO DIGITAL - ESTILOS VISUAIS & IDENTIDADE DA MARCA
   Paleta: Vermelho vibrante, Amarelo Queijo, Preto Carvão e Branco
   ========================================================== */

:root {
  /* Design Tokens Globais de Tema */
  --theme-primary: #DC2626;        /* Cor de ação / destaques */
  --theme-primary-hover: #B91C1C;
  --theme-secondary: #F59E0B;      /* Cor secundária / preços */
  --theme-secondary-hover: #D97706;
  --theme-background: #0D0D0F;     /* Fundo principal do cardápio */
  --theme-surface: #151518;        /* Cartões e superfícies */
  --theme-surface-soft: #1B1B1F;   /* Superfícies secundárias / inputs */
  --theme-text: #FFFFFF;           /* Texto principal */
  --theme-text-secondary: #A1A1AA; /* Texto secundário / descrições */
  --theme-border: rgba(255, 255, 255, 0.08); /* Bordas e divisores */
  --theme-on-primary: #FFFFFF;     /* Texto sobre cor primária */

  /* Aliases para compatibilidade total com o código existente */
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-light: #FEE2E2;
  --color-secondary: var(--theme-secondary);
  --color-secondary-hover: var(--theme-secondary-hover);
  --color-dark: var(--theme-background);
  --color-card: var(--theme-surface);
  --color-card-border: var(--theme-border);
  --color-surface: var(--theme-surface-soft);
  --color-text-main: var(--theme-text);
  --color-text-muted: var(--theme-text-secondary);
  --radius-card: 16px;
  --radius-btn: 12px;
  --shadow-card: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 0 20px rgba(220, 38, 38, 0.35);
}

/* Modo Claro Opcional (se ativado via configurações) */
body.light-theme {
  --color-dark: #F8F9FA;
  --color-card: #FFFFFF;
  --color-card-border: #E5E7EB;
  --color-surface: #F3F4F6;
  --color-text-main: #111827;
  --color-text-muted: #6B7280;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
}

/* Reset básico e fluidez */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body,
html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-dark, #0D0D0F) !important;
  color: var(--color-text-main);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Scrollbar moderno e sutil */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--color-surface);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Efeito Glassmorphism para Headers e Barras Fixas */
.glass-nav {
  background: color-mix(in srgb, var(--color-dark, #0D0D0F) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Carrossel de Categorias com Rolagem Suave */
.category-scroll {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding: 4px 1rem;
  gap: 8px;
}
.category-scroll::-webkit-scrollbar {
  display: none;
}
/* Espaçador final para garantir que o último item fique 100% visível e com respiro no final do scroll */
.category-scroll::after {
  content: '';
  display: block;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1px;
}

/* Botões de Categoria */
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  min-height: 40px;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.875rem;
  background: var(--theme-surface-soft, var(--theme-surface, #1e1e24));
  color: var(--theme-text-secondary, #9ca3af);
  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  user-select: none;
}
.category-pill:not(.active):hover {
  background: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-surface-soft, var(--theme-surface, #ffffff))) !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  transform: translateY(-1px);
}
.category-pill:not(.active):hover * {
  color: var(--theme-primary) !important;
}
.category-pill.active {
  background: var(--theme-primary) !important;
  color: var(--theme-on-primary, #ffffff) !important;
  border-color: var(--theme-primary) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-primary) 35%, transparent) !important;
}
.category-pill.active * {
  color: var(--theme-on-primary, #ffffff) !important;
}

/* Cards de Produto */
.product-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-card);
}

/* Imagens com altura e proporção elegantes para celular */
.product-image-container {
  position: relative;
  width: 100%;
  height: 175px;
  overflow: hidden;
  background-color: var(--color-surface);
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.product-card:hover .product-image {
  transform: scale(1.03);
}

/* Badges e tags */
.promo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #DC2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ==========================================================
   LISTA COMPACTA DE PRODUTOS (ETAPA 13 - MOBILE DENSE)
   Design horizontal denso para navegação vertical rápida
   ========================================================== */
.product-card-compact {
  background: var(--color-card, #151518);
  border: 1px solid var(--color-card-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  cursor: pointer;
  position: relative;
  min-height: 130px;
  box-sizing: border-box;
}

.product-card-compact:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.product-compact-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: 0.125rem 0 !important;
}

.product-compact-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
  width: 100px !important;
  gap: 0.375rem !important;
}

@media (min-width: 390px) {
  .product-compact-right {
    width: 108px !important;
  }
}

@media (min-width: 640px) {
  .product-compact-right {
    width: 116px !important;
  }
}

.product-compact-image-box {
  position: relative !important;
  width: 100px !important;
  height: 100px !important;
  flex-shrink: 0 !important;
  border-radius: 0.625rem !important;
  overflow: hidden !important;
  background-color: var(--color-surface, #1B1B1F);
}

@media (min-width: 390px) {
  .product-compact-image-box {
    width: 108px !important;
    height: 108px !important;
  }
}

@media (min-width: 640px) {
  .product-compact-image-box {
    width: 116px !important;
    height: 116px !important;
  }
}

.product-compact-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0.625rem !important;
  transition: transform 0.3s ease;
}

.product-card-compact:hover .product-compact-image {
  transform: scale(1.04);
}

.product-compact-btn-add {
  width: 100% !important;
  height: 28px !important;
  padding: 0 0.5rem !important;
  border-radius: 0.5rem !important;
  background: var(--theme-primary, #DC2626) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
  flex-shrink: 0 !important;
}

.product-compact-btn-add:hover {
  background: var(--theme-primary-hover, #B91C1C) !important;
}

.product-compact-btn-add:active {
  transform: scale(0.96) !important;
}

/* Botões Primários */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), #B91C1C);
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.45);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(1px);
}

/* Botões Amarelos / Secundários */
.btn-secondary {
  background: linear-gradient(135deg, var(--color-secondary), #D97706);
  color: #000000;
  font-weight: 700;
  border-radius: var(--radius-btn);
  padding: 12px 20px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
}
.btn-secondary:hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

/* Botão WhatsApp */
.btn-whatsapp {
  background: #25D366;
  color: #ffffff;
  font-weight: 700;
  border-radius: var(--radius-btn);
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  border: none;
  font-size: 1.05rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
  transition: all 0.2s ease;
}
.btn-whatsapp:hover {
  background: #20BA5A;
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

/* Modal e Drawer Bottom-Sheet Animations */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 99999 !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-backdrop:not(.active) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.modal-backdrop:not(.active) * {
  pointer-events: none !important;
}
.modal-backdrop.active {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.modal-backdrop.active * {
  pointer-events: auto;
}

.modal-content {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  transform: scale(0.95);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-backdrop.active .modal-content {
  transform: scale(1);
}

/* No mobile, modal de produto se comporta como Bottom Sheet nativa */
@media (max-width: 640px) {
  .modal-backdrop {
    align-items: flex-end;
  }
  .modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 92vh;
    transform: translateY(100%);
  }
  .modal-backdrop.active .modal-content {
    transform: translateY(0);
  }
}

/* Prevenção de bloqueio de clique em ícones e botões de entrega */
.btn-edit-delivery-zone svg,
.btn-edit-delivery-zone path,
.btn-delete-delivery-zone svg,
.btn-delete-delivery-zone path,
.btn-toggle-delivery-zone svg,
.btn-toggle-delivery-zone path,
#btn-admin-add-zone svg,
#btn-admin-add-zone path,
#btn-test-delivery-address svg,
#btn-test-delivery-address path {
  pointer-events: none !important;
}

/* Drawer lateral do Carrinho */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 440px;
  background: var(--color-card);
  border-left: 1px solid var(--color-card-border);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.drawer-backdrop.active ~ .drawer-panel,
.drawer-panel.active {
  transform: translateX(0);
}

/* Animação de pulso para status e alertas */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.animate-pulse-subtle {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Estilo para simulação de WhatsApp Chat */
.chat-bubble-user {
  background: #005C4B;
  color: #E9EDEF;
  border-radius: 12px 12px 2px 12px;
  padding: 10px 14px;
  max-width: 82%;
  margin-left: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.chat-bubble-bot {
  background: #202C33;
  color: #E9EDEF;
  border-radius: 12px 12px 12px 2px;
  padding: 10px 14px;
  max-width: 82%;
  margin-right: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: pre-line;
}

/* Ocultar elementos ao imprimir */
@media print {
  body * {
    visibility: hidden;
  }
  .printable-area, .printable-area * {
    visibility: visible;
  }
  .printable-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
  }
}

/* ==========================================================
   CORREÇÃO CRÍTICA: LEAFLET MAPS × TAILWIND CSS
   Impede que regras globais do Tailwind distorçam ou esmaguem
   os tiles de mapa (.leaflet-tile) e garante 100% da área útil.
   ========================================================== */
.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  background-color: #1e1e24 !important;
  font-family: inherit !important;
}

.leaflet-container img.leaflet-tile {
  max-width: none !important;
  max-height: none !important;
  width: 256px !important;
  height: 256px !important;
  display: inline !important;
  transform-origin: 0 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: content-box !important;
}

.leaflet-tile-container {
  width: 100% !important;
  height: 100% !important;
}

.leaflet-pane {
  z-index: 100 !important;
}

.leaflet-tile-pane {
  z-index: 200 !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
}

.leaflet-popup-pane {
  z-index: 700 !important;
}

.leaflet-control {
  z-index: 800 !important;
}

/* Map Containers Fixes */
#admin-store-map,
#admin-delivery-map,
#modal-zone-map {
  width: 100% !important;
  height: 100% !important;
  min-height: 260px;
}

/* ==========================================================
   PAINEL LATERAL DE DETALHES DO PEDIDO (DRAWER) & KANBAN
   ========================================================== */

/* Drawer Backdrop: sutil, discreto e fixo sobre a viewport */
.order-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.order-drawer-backdrop.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: block;
}

/* Drawer Lateral Panel: 100vh fixo à direita, sem empurrar o fluxo */
.order-drawer-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 460px;
  height: 100vh;
  background: #18181C;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
  z-index: 99991;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  will-change: transform;
}

.order-drawer-backdrop.active .order-drawer-panel {
  transform: translateX(0);
}

@media (max-width: 640px) {
  .order-drawer-panel {
    max-width: 100%;
    border-left: none;
  }
}

/* Card Selecionado no Kanban */
.order-card-selected {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  background: rgba(39, 39, 47, 0.98) !important;
}

/* Scrollbar do Kanban */
.kanban-board-scroll::-webkit-scrollbar {
  height: 8px;
}
.kanban-board-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 9999px;
}
.kanban-board-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
}
.kanban-board-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ==========================================================
   SISTEMA DE TEMAS VISUAIS PRONTOS (SEÇÃO CORES & VISUAL)
   ========================================================== */

/* Cards de Seleção de Tema no Admin */
.theme-preset-card {
  position: relative;
  background: var(--color-surface, #1e1e24);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  overflow: hidden;
  outline: none;
}

.theme-preset-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.4);
}

.theme-preset-card:focus-visible {
  border-color: var(--preset-primary, #ea1d2c) !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5) !important;
}

.theme-preset-card.active {
  border-color: var(--preset-primary, #ea1d2c) !important;
  box-shadow: 0 0 0 1px var(--preset-primary, #ea1d2c), 0 8px 24px -4px rgba(0, 0, 0, 0.5) !important;
  background: rgba(30, 30, 36, 0.95);
}

.theme-preset-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--preset-primary, #ea1d2c);
  color: var(--preset-on-primary, #ffffff);
  display: none; /* Inativo por padrão */
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none !important;
}

.theme-preset-card.active .theme-preset-check {
  display: flex !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Mini Preview dentro do Card de Tema */
.theme-card-mini-preview {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}

.theme-card-mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.theme-card-mini-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Bolinhas de Paleta de Cores */
.theme-palette-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

/* ==========================================================
   DISPOSITIVO DE PRÉVIA DO CARDÁPIO NO ADMIN
   ========================================================== */
.theme-preview-phone {
  background: var(--theme-background, #ffffff);
  color: var(--theme-text, #171717);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  transition: all 0.3s ease;
}

/* ==========================================================
   REGRAS DE CONTRASTE E ACESSIBILIDADE - MODO CLARO
   ========================================================== */
html[data-theme-mode="light"] {
  color: var(--theme-text, #171717) !important;
}

html[data-theme-mode="light"] body,
html[data-theme-mode="light"] .max-w-4xl {
  background-color: var(--theme-background, #ffffff) !important;
  color: var(--theme-text, #171717) !important;
}

/* Textos no modo claro */
html[data-theme-mode="light"] .text-white,
html[data-theme-mode="light"] .text-gray-100,
html[data-theme-mode="light"] .text-gray-200 {
  color: var(--theme-text, #171717) !important;
}

html[data-theme-mode="light"] .text-gray-300,
html[data-theme-mode="light"] .text-gray-400 {
  color: var(--theme-text-secondary, #6b7280) !important;
}

/* Superfícies e Cards no modo claro */
html[data-theme-mode="light"] .product-card,
html[data-theme-mode="light"] .product-card-compact,
html[data-theme-mode="light"] .bg-brand-card {
  background-color: var(--theme-surface, #ffffff) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
  color: var(--theme-text, #171717) !important;
}

html[data-theme-mode="light"] .bg-brand-surface {
  background-color: var(--theme-surface-soft, #f8f8f8) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
  color: var(--theme-text, #171717) !important;
}

html[data-theme-mode="light"] .glass-nav {
  background-color: color-mix(in srgb, var(--theme-background, #ffffff) 92%, transparent) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
}

html[data-theme-mode="light"] .border-brand-border,
html[data-theme-mode="light"] .border-white\/\[0\.08\],
html[data-theme-mode="light"] .border-white\/10 {
  border-color: var(--theme-border, #e5e7eb) !important;
}

/* Modais no modo claro */
html[data-theme-mode="light"] .modal-container,
html[data-theme-mode="light"] .modal-content,
html[data-theme-mode="light"] .cart-drawer {
  background-color: var(--theme-surface, #ffffff) !important;
  color: var(--theme-text, #171717) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
}

/* Inputs e Seletores no modo claro */
html[data-theme-mode="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
html[data-theme-mode="light"] select,
html[data-theme-mode="light"] textarea {
  background-color: var(--theme-surface, #ffffff) !important;
  color: var(--theme-text, #171717) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
}

html[data-theme-mode="light"] input::placeholder,
html[data-theme-mode="light"] textarea::placeholder {
  color: var(--theme-text-secondary, #9ca3af) !important;
}

/* Botões de Ação com Cor Primária */
.btn-primary,
.bg-brand-red {
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary, #ffffff) !important;
}

.btn-primary:hover,
.bg-brand-red:hover {
  background-color: var(--theme-primary-hover, var(--theme-primary)) !important;
}

.category-pill.active {
  background-color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
  color: var(--theme-on-primary, #ffffff) !important;
}

.category-pill.active * {
  color: var(--theme-on-primary, #ffffff) !important;
}

html[data-theme-mode="light"] .category-pill:not(.active) {
  background-color: var(--theme-surface-soft, #f8f8f8) !important;
  color: var(--theme-text-secondary, #6b7280) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
}

html[data-theme-mode="light"] .category-pill:not(.active) * {
  color: var(--theme-text-secondary, #6b7280) !important;
}

html[data-theme-mode="light"] .category-pill:not(.active):hover {
  background-color: color-mix(in srgb, var(--theme-primary) 12%, var(--theme-surface-soft, #ffffff)) !important;
  color: var(--theme-primary) !important;
  border-color: var(--theme-primary) !important;
}

html[data-theme-mode="light"] .category-pill:not(.active):hover * {
  color: var(--theme-primary) !important;
}

/* ==========================================================
   BANNER PROMOCIONAL CONTROLADO PELO PRODUTO (ZERO RESIDUAL)
   ========================================================== */
#promo-banner-section.hidden,
#promo-banner-section[hidden],
#promo-banner-section[style*="display: none"] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}

.promo-banner-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 18%, var(--theme-surface, #151518)), var(--theme-surface-soft, #191a1d));
  border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
}

html[data-theme-mode="light"] .promo-banner-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary) 10%, var(--theme-surface-soft, #ffffff)), var(--theme-surface, #ffffff)) !important;
  border-color: var(--theme-border, #e5e7eb) !important;
}

/* Preservação rigorosa de fotografias de produtos (Seção 21) */
.product-image,
.product-image-container img,
#modal-product-img,
#modal-prod-img {
  filter: none !important;
}

/* ==========================================================
   MODAL DE PRODUTO — ESTRUTURA COMPACTA & RESPONSIVA (UX)
   ========================================================== */
#modal-product .modal-content {
  max-height: min(92vh, 92dvh);
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

@media (max-width: 640px) {
  #modal-product .modal-content {
    max-height: min(94vh, 94dvh);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 100%;
    margin: 0;
  }
}

.modal-product-image-container {
  position: relative;
  width: 100%;
  height: clamp(180px, calc(41vw + 49px), 230px);
  background: var(--theme-surface-soft, #111214);
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 641px) {
  .modal-product-image-container {
    height: 280px;
  }
}

#modal-prod-img,
#modal-product-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block;
}

#modal-prod-scroll-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#btn-close-product-modal {
  z-index: 10;
  touch-action: manipulation;
}

#modal-prod-promo-badge {
  z-index: 10;
}


/* Complementos no detalhe do pedido: grupo, escolha e preço em colunas legíveis. */
#drawer-order-items .order-item-options {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(156, 163, 175, .16);
  display: grid;
  gap: 14px;
}
#drawer-order-items .order-item-option-label {
  color: #9ca3af;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .035em;
  text-transform: uppercase;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
}
#drawer-order-items .order-item-option-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}
#drawer-order-items .order-item-option-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  line-height: 1.5;
}
#drawer-order-items .order-item-option-name {
  color: #f3f4f6;
  min-width: 0;
  overflow-wrap: anywhere;
}
#drawer-order-items .order-item-option-price {
  color: #fbbf24;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}


/* Melhorias do cardápio móvel, respeitando as cores da loja. */
.menu-search-field {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 12px; border-radius: 14px;
  background: var(--color-surface, #1b1b1f);
  border: 1px solid var(--color-card-border, rgba(255,255,255,.12));
  color: var(--color-text-muted, #9ca3af);
}
.menu-search-field:focus-within { border-color: var(--theme-primary, #dc2626); }
.menu-search-field input {
  width: 100%; min-width: 0; min-height: 48px; outline: none;
  background: transparent; color: var(--color-text-main, #f3f4f6); font-size: 16px;
}
.menu-search-field input::-webkit-search-cancel-button { display: none; }
.menu-search-field button { min-width: 44px; min-height: 44px; }
.menu-search-field button:not(.hidden) { display: flex; align-items: center; justify-content: center; }
.menu-search-summary { margin-bottom: 16px; font-size: 13px; color: var(--color-text-muted, #9ca3af); }
.menu-choice-progress {
  padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  color: var(--color-text-main, #f3f4f6); background: var(--color-surface, #1b1b1f);
  border-left: 3px solid var(--theme-primary, #dc2626);
}
.menu-choice-progress.menu-choice-ready { border-left-color: #22c55e; }
#modal-customization-options .menu-choice-complete { border-bottom-color: #22c55e; }
#modal-customization-options label:has(input:checked) {
  border-color: var(--theme-primary, #dc2626);
  box-shadow: inset 3px 0 0 var(--theme-primary, #dc2626);
}
@media (max-width: 640px) {
  #category-nav-container .category-pill { min-height: 44px; }
  #modal-customization-options label { min-height: 48px; }
  #modal-customization-options input { width: 18px; height: 18px; flex-shrink: 0; }
  #btn-modal-qty-minus, #btn-modal-qty-plus, #btn-close-product-modal { min-width: 44px; min-height: 44px; }
  #modal-prod-scroll-content input, #modal-prod-scroll-content textarea { font-size: 16px; }
  #floating-cart-bar { bottom: max(12px, env(safe-area-inset-bottom)); }
  #floating-cart-bar > div { background: var(--theme-primary, #dc2626); }
  #btn-floating-view-cart { min-height: 44px; }
}


/* Seletor de entrada da residência em tela inteira, acima do checkout. */
.delivery-location-dialog {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--color-text-main, #f3f4f6); background: var(--color-card, #151518);
}
.delivery-location-dialog[open] { display: flex; flex-direction: column; }
.delivery-location-dialog::backdrop { background: rgba(0,0,0,.65); }
.delivery-location-header {
  padding: max(18px, env(safe-area-inset-top)) 18px 14px;
  display: flex; justify-content: space-between; gap: 16px; flex-shrink: 0;
}
.delivery-location-header h2 { font-size: 18px; font-weight: 800; line-height: 1.3; }
.delivery-location-header p, .delivery-location-footer p {
  margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted, #9ca3af);
}
.delivery-location-header button { min-width: 44px; height: 44px; border-radius: 12px; background: var(--color-surface, #1b1b1f); }
.delivery-location-large-map { flex: 1; min-height: 160px; width: 100%; }
.delivery-location-footer { padding: 12px 18px max(16px, env(safe-area-inset-bottom)); flex-shrink: 0; }
.delivery-location-footer .btn-primary { width: 100%; min-height: 48px; margin-top: 12px; font-size: 15px; font-weight: 800; }
.delivery-location-cancel { display: block; width: 100%; min-height: 44px; font-size: 13px; margin-top: 4px; }
.delivery-location-pin {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: #22c55e; border: 3px solid white; border-radius: 50%; font-size: 23px;
  box-shadow: 0 3px 12px rgba(0,0,0,.3); cursor: grab;
}


/* Navegação lateral do lojista, com foco no espaço de trabalho. */
.admin-menu-shell { margin-top: 12px; border-top: 1px solid var(--color-card-border, #303238); padding-top: 10px; }
.admin-menu-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.admin-menu-toggle::-webkit-details-marker { display: none; }
#admin-current-section { color: var(--color-text-muted, #9ca3af); font-size: 12px; }
.admin-grouped-nav { display: flex; flex-direction: column; gap: 16px; padding-top: 12px; }
.admin-nav-group { min-width: 0; }
.admin-nav-group h2 { padding: 0 12px; margin-bottom: 6px; color: var(--color-text-muted, #9ca3af); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.admin-nav-group-links { display: flex; flex-direction: column; gap: 3px; }
.admin-grouped-nav .admin-nav-tab { min-height: 44px; width: 100%; padding: 11px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; text-align: left; }
.admin-grouped-nav .admin-nav-tab svg { flex-shrink: 0; opacity: .85; }
.admin-grouped-nav .admin-nav-tab[aria-pressed="true"] {
  color: var(--color-text-main, #f3f4f6);
  box-shadow: inset 3px 0 0 var(--theme-primary, #dc2626);
  background: var(--color-surface, #25252b);
}
.admin-grouped-nav .admin-nav-tab:hover { background: var(--color-surface, #25252b); }
.admin-pending-badge { margin-left: auto; padding: 2px 6px; border-radius: 20px; background: var(--theme-primary, #dc2626); color: white; font-size: 10px; font-weight: 800; }
@media (min-width: 901px) {
  #admin-main-wrapper > header { margin-left: 232px; padding-left: 24px; padding-right: 24px; }
  #admin-main-wrapper > main { margin-left: 232px; margin-right: 0; width: calc(100% - 232px); max-width: none; }
  .admin-menu-shell {
    position: fixed; inset: 0 auto 0 0; width: 232px; height: 100dvh;
    margin: 0; padding: 18px 14px; border-top: 0;
    border-right: 1px solid var(--color-card-border, #303238);
    background: var(--color-card, #151518); overflow-y: auto; overscroll-behavior: contain;
  }
  .admin-menu-toggle { padding: 0 12px 16px; margin-bottom: 12px; border-radius: 0; border-bottom: 1px solid var(--color-card-border, #303238); font-size: 16px; font-weight: 800; pointer-events: none; }
  #admin-current-section { display: none; }
  .admin-menu-shell > .admin-grouped-nav, .admin-menu-shell:not([open]) > .admin-grouped-nav { display: flex; padding-top: 0; }
}
@media (max-width: 900px) {
  .admin-menu-toggle { background: var(--color-surface, #1b1b1f); }
  .admin-menu-shell[open] .admin-grouped-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0; }
}


/* Quadro de pedidos: leitura rápida, prioridades e espaço de trabalho. */
#tab-orders .kanban-board-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(235px, 1fr); align-items: stretch; gap: 14px; }
#tab-orders .kanban-board-scroll > div { min-width: 0; max-width: none; height: max(440px, calc(100dvh - 335px)); }
#tab-orders .kanban-board-scroll > div > div:first-child { position: sticky; top: 0; flex-shrink: 0; min-height: 34px; }
.order-work-card { border-width: 1px; border-style: solid; }
.order-work-card:focus-visible { outline: 2px solid var(--theme-primary, #dc2626); outline-offset: 3px; }
.order-work-card.order-waiting { border-left: 3px solid #fbbf24; }
.order-work-card.order-needs-attention { border-color: rgba(248,113,113,.65); border-left: 3px solid #f87171; }
.order-items-preview { padding-top: 8px; border-top: 1px solid var(--color-card-border, #303238); color: var(--color-text-muted, #9ca3af); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.order-items-more { font-size: 10px; margin-top: 3px; }
.order-elapsed-label { font-size: 10px; line-height: 1.5; color: var(--color-text-muted, #9ca3af); }
.order-elapsed-alert { color: #fca5a5; font-weight: 700; }
.order-card-open-hint { display: flex; justify-content: space-between; border-top: 1px solid var(--color-card-border, #303238); padding-top: 8px; color: var(--color-text-muted, #9ca3af); font-size: 11px; font-weight: 600; }
.order-column-empty { text-align: center; padding: 28px 12px; border: 1px dashed var(--color-card-border, #303238); border-radius: 12px; color: var(--color-text-muted, #9ca3af); font-size: 12px; }
@media (min-width: 1600px) { #tab-orders .kanban-board-scroll { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; } }
@media (max-width: 640px) { #tab-orders .kanban-board-scroll { grid-auto-columns: minmax(260px, 85vw); } }


/* Retorno do cliente ao acompanhamento, sem sair do cardápio. */
.last-order-summary {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--theme-primary, #dc2626); border-radius: 14px;
  background: var(--color-card, #151518); color: var(--color-text-main, #f3f4f6); text-align: left;
}
.last-order-indicator { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--theme-primary, #dc2626); }
.last-order-summary-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.last-order-summary-text strong { font-size: 13px; overflow-wrap: anywhere; }
.last-order-summary-text > span { font-size: 12px; color: var(--color-text-muted, #9ca3af); }
.last-order-link { margin-left: auto; font-size: 12px; font-weight: 700; flex-shrink: 0; color: var(--theme-primary, #dc2626); }


.admin-catalog-filters { display: grid; grid-template-columns: minmax(180px,2fr) repeat(2,minmax(130px,1fr)) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--color-card-border, #303238); border-radius: 14px; background: var(--color-card, #151518); }
.admin-catalog-filters label { display: flex; flex-direction: column; gap: 7px; font-size: 12px; color: var(--color-text-muted, #9ca3af); }
.admin-catalog-filters input, .admin-catalog-filters select { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--color-card-border, #303238); background: var(--color-surface, #1b1b1f); color: var(--color-text-main, #f3f4f6); font-size: 13px; }
.admin-catalog-filters button { min-height: 44px; padding: 10px 12px; font-size: 12px; font-weight: 700; color: var(--color-text-muted, #9ca3af); }
.admin-catalog-filters input:focus-visible, .admin-catalog-filters select:focus-visible { outline: 2px solid var(--theme-primary, #dc2626); outline-offset: 2px; }
@media(max-width:1100px) { .admin-catalog-filters { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .admin-catalog-filters { grid-template-columns: minmax(0,1fr); } .admin-catalog-filters input {font-size:16px;} }


.admin-catalog-workspace { margin-bottom: 24px; }
.admin-catalog-subnav { display: flex; gap: 8px; margin-top: 20px; border-bottom: 1px solid var(--color-card-border, #303238); overflow-x: auto; }
.admin-catalog-subnav .admin-catalog-subtab { min-height: 46px; padding: 12px 18px; border: 0; border-radius: 10px 10px 0 0; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--color-text-muted, #9ca3af); background: transparent; }
.admin-catalog-subnav .admin-catalog-subtab[aria-pressed="true"] { color: var(--color-text-main, #f3f4f6); background: var(--color-surface, #1b1b1f); box-shadow: inset 0 -3px 0 var(--theme-primary, #dc2626); }
.admin-catalog-subnav .admin-catalog-subtab:focus-visible { outline: 2px solid var(--theme-primary, #dc2626); outline-offset: -2px; }


.admin-product-category-row > td { padding: 18px 16px; background: var(--color-card, #151518); border-top: 2px solid var(--color-card-border, #303238); }
.admin-product-category-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.admin-product-category-header h3 { font-size: 16px; font-weight: 800; color: var(--color-text-main, #f3f4f6); }
.admin-product-category-header p { margin-top: 4px; font-size: 12px; color: var(--color-text-muted, #9ca3af); }
.admin-category-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.admin-category-actions button { min-height: 36px; padding: 8px 10px; border: 1px solid var(--color-card-border, #303238); border-radius: 8px; font-size: 11px; font-weight: 600; color: var(--color-text-main, #f3f4f6); background: var(--color-surface, #1b1b1f); }
.admin-category-actions button:disabled { opacity: .3; cursor: default; }
.admin-category-actions .btn-inline-category-add { color: var(--theme-primary, #dc2626); }
.admin-category-actions .btn-inline-category-delete { color: #f87171; }


/* Categorias com hierarquia própria, separadas das linhas de produtos. */
.admin-category-blocks { display: grid; gap: 28px; }
.admin-category-block { min-width: 0; border: 1px solid var(--color-card-border, #303238); border-radius: 16px; background: var(--color-card, #151518); }
.admin-category-block-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 22px; border-left: 4px solid var(--theme-primary, #dc2626); border-radius: 16px 0 0 0; background: var(--color-surface, #1b1b1f); }
.admin-category-eyebrow { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--color-text-muted, #9ca3af); margin-bottom: 7px; }
.admin-category-block-title > div { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.admin-category-block-title h3 { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--color-text-main, #f3f4f6); }
.admin-category-count { font-size: 11px; font-weight: 600; color: var(--color-text-muted, #9ca3af); }
.admin-category-paused { font-size: 12px; margin-top: 5px; color: #fbbf24; }
.admin-category-main-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.admin-category-main-actions > button, .admin-category-options summary { padding: 10px 12px; min-height: 40px; font-size: 12px; font-weight: 700; border-radius: 10px; cursor: pointer; }
.admin-category-main-actions > button { background: var(--theme-primary, #dc2626); color: var(--theme-on-primary, #fff); }
.admin-category-options { position: relative; }
.admin-category-options summary { border: 1px solid var(--color-card-border, #303238); color: var(--color-text-muted, #9ca3af); }
.admin-category-options-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 200px; display: grid; padding: 6px; border-radius: 12px; background: var(--color-surface, #1b1b1f); border: 1px solid var(--color-card-border, #303238); box-shadow: 0 10px 28px rgba(0,0,0,.3); }
.admin-category-options-menu button { text-align: left; padding: 10px; font-size: 12px; border-radius: 6px; color: var(--color-text-main, #f3f4f6); }
.admin-category-options-menu button:hover { background: var(--color-card, #151518); }
.admin-category-options-menu button:disabled { opacity: .3; cursor: default; }
.admin-category-options-menu .btn-inline-category-delete { color: #f87171; }
.admin-category-table-scroll { overflow-x: auto; border-radius: 0 0 16px 16px; }
.admin-category-block table { min-width: 740px; table-layout: fixed; }
.admin-category-block th { padding: 12px 14px; font-size: 10px; font-weight: 600; color: var(--color-text-muted, #9ca3af); border-bottom: 1px solid var(--color-card-border, #303238); }
.admin-category-block th:first-child { width: 70px; }
.admin-category-block th:nth-child(2) { width: 30%; }
.admin-category-product-row { background: transparent; border-bottom: 1px solid var(--color-card-border, #303238); }
.admin-category-product-row:last-child { border-bottom: 0; }
.admin-category-product-row:hover { background: var(--color-surface, #1b1b1f); }
.admin-category-empty { padding: 28px 22px; font-size: 13px; color: var(--color-text-muted, #9ca3af); }
@media(max-width:640px) { .admin-category-block-header { padding: 18px; } .admin-category-block-title h3 { font-size: 18px; } }

/* Destaques legíveis nos fundos claros e escuros do cardápio. */
.schedule-today-badge {
  background: #facc15;
  color: #422006 !important;
  border: 1px solid #a16207;
  font-weight: 800;
}
.free-delivery-badge {
  background: #fef3c7;
  color: #78350f !important;
  border-color: #d97706;
  font-weight: 700;
}
#modal-schedule-status-banner.bg-green-500\/10 {
  color: #166534 !important;
  background: #dcfce7;
}
#modal-schedule-status-banner.bg-red-500\/10 {
  color: #991b1b !important;
  background: #fee2e2;
}