/* =========================================================
   iFody — Skin sazonal "Clima de Copa" 🇧🇷
   Carrega DEPOIS de styles.css, só quando a opção `skin` = `copa`
   (ver inc/enqueue.php + Customizer iFody → Tema).

   Filosofia: a identidade iFody é o FUNDO escuro/discreto — ele NÃO muda.
   A Copa entra só na CAMADA DE ACENTO: redefinimos os tokens de cor e os
   canais --*-rgb, então cada regra que usa var(--pink), rgba(var(--pink-rgb))
   etc. re-tematiza sozinha, sem tocar em nenhum componente.

   Paleta:
     verde  #00A859   amarelo #FFCE00   azul #1466D6 / #2E8BFF
   ========================================================= */

:root {
  /* --- Tokens sólidos (papel preservado, sotaque trocado) --- */
  --pink:        #00A859;   /* acento primário  → verde   */
  --pink-light:  #3FD584;   /* hover/links claros → verde claro (legível no escuro) */
  --violet:      #1466D6;   /* acento secundário → azul   */
  --orange:      #FF8A1F;   /* mantém o calor (combina com amarelo) */
  --yellow:      #FFCE00;   /* amarelo Brasil */
  --blue:        #2E8BFF;   /* azul claro p/ links/info — legível no fundo escuro */
  --gold:        #FFD23F;   /* amarelo-ouro */

  /* --- Canais RGB (usados em rgba(var(--x-rgb), α) nos 167 glows/sombras) --- */
  --pink-rgb:        0, 168, 89;
  --pink-light-rgb:  63, 213, 132;
  --violet-rgb:      20, 102, 214;
  --orange-rgb:      255, 138, 31;
  --yellow-rgb:      255, 206, 0;
  --blue-rgb:        46, 139, 255;
  --gold-rgb:        255, 210, 63;

  /* --- Gradientes --- */
  /* Primário GLOBAL = verde→azul: continua escuro o bastante p/ texto branco
     nos ~70 elementos que usam var(--grad-primary) com cor branca. */
  --grad-primary: linear-gradient(135deg, #00A859 0%, #1466D6 100%);
  --grad-warm:    linear-gradient(135deg, #FFCE00 0%, #FF8A1F 100%);
  --grad-cool:    linear-gradient(135deg, #2E8BFF 0%, #00A859 100%);
  --grad-gold:    linear-gradient(135deg, #FFD23F 0%, #FF8A1F 100%);
}

/* =========================================================
   Botões de AÇÃO principais — o gradiente icônico verde→amarelo
   (a bandeira). Aqui o texto vira ESCURO porque branco sobre amarelo
   seria ilegível. Só nas CTAs reais, não no token global.
   ========================================================= */
.btn--primary {
  background: linear-gradient(135deg, #00A859 0%, #FFCE00 100%);
  color: #053D20;
}
.pdp__add,
.pdp .pdp__add {
  background: linear-gradient(135deg, #00A859 0%, #FFCE00 100%) !important;
  color: #053D20 !important;
}

/* Título com destaque (.title em usa background-clip:text) — verde→amarelo
   fica vivo E legível porque é texto sobre o fundo escuro.
   IMPORTANTE: usar `background-image` (NÃO o shorthand `background`), senão o
   shorthand reseta `background-clip` pra border-box e o texto vira um bloco
   sólido de gradiente em vez de texto recortado. */
.title em {
  background-image: linear-gradient(135deg, #00C95F 0%, #FFCE00 100%);
}

/* =========================================================
   DECORAÇÃO TEMÁTICA — a "cara de Copa" propriamente dita.
   Tudo CSS puro, sem tocar markup. Liga/desliga junto com a skin.
   ========================================================= */

/* Topbar festiva: tom verde→amarelo→azul sobre o fundo escuro (texto segue
   claro e legível) + bandeirinhas penduradas na borda de baixo. */
.topbar {
  background:
    linear-gradient(90deg, rgba(0, 168, 89, .28) 0%, rgba(255, 206, 0, .12) 50%, rgba(20, 102, 214, .28) 100%),
    var(--bg-2);
  border-bottom: none;
}

/* Bandeirinhas (bunting). SVG tileável de 3 galhardetes verde/amarelo/azul
   numa cordinha. Fica EM FLUXO no rodapé da topbar (que tem overflow:hidden),
   então não sobrepõe o conteúdo nem exige position:relative no header. */
.topbar::after {
  content: "";
  display: block;
  height: 16px;
  margin-top: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16'%3E%3Cpath d='M0 1H48' stroke='%23FFFFFF' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M0 1L16 1L8 15Z' fill='%2300A859'/%3E%3Cpath d='M16 1L32 1L24 15Z' fill='%23FFCE00'/%3E%3Cpath d='M32 1L48 1L40 15Z' fill='%231466D6'/%3E%3C/svg%3E") repeat-x bottom left;
}

/* Header: a faixa verde-amarelo-azul vira a "cordinha" mestre (3px) — também
   cobre o caso de a topbar estar desligada. */
.header {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #00A859 0%, #FFCE00 50%, #1466D6 100%) 1;
}

/* =========================================================
   COMEMORAÇÃO "GOL!" no add-to-cart — ver assets/js/celebrate.js.
   Overlays decorativos: não capturam toque (pointer-events:none).
   ========================================================= */
.ifody-confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
}
.ifody-gol {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 99999;
}
.ifody-gol__txt {
  font-family: var(--font, 'Outfit', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(64px, 22vw, 168px);
  line-height: 1;
  letter-spacing: -.03em;
  color: #FFCE00;
  -webkit-text-stroke: 3px #00A859; /* contorno verde — cara de placar */
  text-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  will-change: transform, opacity;
  animation: ifody-gol-pop 1.4s var(--ease, cubic-bezier(.22, .61, .36, 1)) forwards;
}
@keyframes ifody-gol-pop {
  0%   { transform: scale(.4) rotate(-7deg); opacity: 0; }
  16%  { transform: scale(1.18) rotate(3deg); opacity: 1; }
  30%  { transform: scale(1) rotate(0); opacity: 1; }
  72%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.06); opacity: 0; }
}
/* Acessibilidade: sem pulo em quem pediu menos movimento (o JS também não
   dispara confete nesse caso) — fica só um fade suave. */
@media (prefers-reduced-motion: reduce) {
  .ifody-gol__txt { animation: ifody-gol-fade 1s ease forwards; }
}
@keyframes ifody-gol-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}