/* Estilos compartilhados — formas orgânicas, sombras suaves, divisores e toasts. */

body {
  background-color: #f7f9ff;
}

/* Cantoneira inferior direita: o botão do WhatsApp e a pilha de toasts
   disputam esse canto. Estas medidas são a fonte única das duas posições —
   `env(safe-area-inset-*)` afasta o botão da barra de gestos do iPhone e do
   recorte em tela cheia. */
:root {
  --fab-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  --fab-right: calc(16px + env(safe-area-inset-right, 0px));
  --fab-altura: 56px; /* altura do pill: ícone + duas linhas de texto */
}

@media (min-width: 1024px) {
  :root {
    --fab-right: calc(24px + env(safe-area-inset-right, 0px));
  }
}

/* Ícones servidos pelo próprio site: subset do Material Symbols com os 53
   glifos usados aqui (~59 KB). Antes a fonte e a classe vinham do Google
   Fonts; quando aquela folha não chegava — rede móvel ruim, bloqueador de
   rastreadores, offline — a classe ficava sem font-family e o navegador
   desenhava a ligadura crua ("shopping_cart", "menu"…) no lugar do ícone. */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url('material-symbols-outlined.7741283b.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* font-variation-settings substitui a declaração inteira, então os outros
   eixos precisam ser repetidos aqui — senão o ícone preenchido sai com peso
   e tamanho óptico diferentes dos vizinhos. */
.material-symbols-outlined.filled,
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.soft-shadow {
  box-shadow: 0 8px 24px rgba(118, 205, 205, 0.12);
}

.organic-shape {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 8s ease-in-out infinite;
}

.organic-shape-static {
  border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}

@keyframes morph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.float-slow   { animation: float 6s ease-in-out infinite; }
.float-medium { animation: float 5s ease-in-out infinite; }
.float-fast   { animation: float 4s ease-in-out infinite reverse; }

/* Divisor ondulado usado entre seções */
.wavy-divider {
  line-height: 0;
  width: 100%;
  overflow: hidden;
}

.wavy-divider svg {
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

.wavy-divider .shape-fill {
  fill: #f7f9ff;
}

/* Toast de feedback (adicionar ao carrinho, avisos etc.) */
/* Empilha ACIMA do botão do WhatsApp — os dois moram no mesmo canto. */
#toast-stack {
  position: fixed;
  z-index: 100;
  bottom: calc(var(--fab-bottom) + var(--fab-altura) + 12px);
  right: var(--fab-right);
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  color: #151c24;
  border-left: 6px solid #006a6a;
  border-radius: 16px;
  padding: 14px 20px;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 15px;
  box-shadow: 0 12px 32px rgba(21, 28, 36, 0.14);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  max-width: min(90vw, 360px);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast--secondary { border-left-color: #944461; }
.toast--error     { border-left-color: #ba1a1a; }

/* Badge do carrinho pulsando ao mudar */
@keyframes badge-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.badge-pop { animation: badge-pop .35s ease; }

/* Skeleton simples enquanto o catálogo renderiza */
.skeleton {
  background: linear-gradient(90deg, #e8eef9 25%, #f7f9ff 50%, #e8eef9 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

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

/* Botão flutuante do WhatsApp: brilho pulsando no próprio pill e um anel que
   se expande atrás dele. Mesmo par de animações usado no projeto da imobja. */
@keyframes whatsapp-fab-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35); }
  50%      { box-shadow: 0 4px 22px rgba(37, 211, 102, 0.50); }
}

@keyframes whatsapp-fab-ring {
  0%   { transform: scale(1);    opacity: 0.35; }
  100% { transform: scale(1.35); opacity: 0; }
}

.whatsapp-fab {
  animation: whatsapp-fab-glow 2.5s ease-in-out infinite;
}

.whatsapp-fab-ring {
  animation: whatsapp-fab-ring 2.5s ease-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .organic-shape,
  .float-slow,
  .float-medium,
  .float-fast,
  .skeleton,
  .badge-pop,
  .whatsapp-fab,
  .whatsapp-fab-ring {
    animation: none;
  }
}