/*
  Vibe Fitness — identidade visual derivada da logo.
  Paleta: magenta/indigo extraídos da logo, com tints ajustados para
  contraste AA sobre fundo escuro (ver seção 4 do master prompt).
*/

:root {
  --vibe-preto: #0B0B0C;
  --vibe-grafite: #18181B;
  --vibe-magenta: #97066A; /* cor de marca, direto da logo */
  --vibe-pink: #FC1DB6;    /* cor de ação — CTAs, preços, destaques */
  --vibe-indigo: #5C5AE2;  /* acento secundário — tags NOVO/promo */
  --vibe-cinza: #A1A1AA;
  --vibe-branco: #FAFAFA;
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, .font-titulo {
  font-family: 'Outfit', sans-serif;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* Evita flash de conteúdo antes do Alpine.js inicializar (drawers, modais, submenus). */
[x-cloak] {
  display: none !important;
}

/* Card de produto — hover com zoom leve na imagem (seção 6.2) */
.card-produto .card-produto-imagem {
  transition: transform 200ms ease;
}
.card-produto:hover .card-produto-imagem {
  transform: scale(1.05);
}

/* Botão flutuante do WhatsApp — fixo em todas as páginas da vitrine */
.whatsapp-flutuante {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Header fixo transparente que ganha fundo ao rolar (controlado via Alpine.js) */
.header-vitrine {
  transition: background-color 200ms ease, backdrop-filter 200ms ease;
}

/* Cupom térmico 80mm — usado só na tela de impressão do PDV */
@media print {
  .cupom-80mm {
    width: 80mm;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .no-print {
    display: none !important;
  }
  /* Some só o cupom/relatório na impressão — nunca a sidebar, o topo ou o rodapé do admin. */
  aside, header, footer {
    display: none !important;
  }
  main {
    padding: 0 !important;
  }
  .flex.min-h-screen, .flex-1.flex.flex-col {
    display: block !important;
  }
}

/* Impressão de relatórios (seção 13) */
@media print {
  .relatorio-print .no-print {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}