/* Fantasia de Halloween da Odd (plano em projetos/halloween/plano.md).
   Só vale quando o halloween.js põe a classe .tema-halloween no <html>.
   Contraste conferido (AA 4,5:1): laranja #ff7a1a no card #170f22 = 7,1:1;
   preto no botão laranja = 8,1:1; texto #cdbfe0 no card = 10,8:1. */

/* 1. Paleta sinistra: preto-roxo, laranja abóbora e verde gosma */
html.tema-halloween,
html.tema-halloween[data-theme="light"] {
  --bg-body: #0b0710;
  --bg-surface: #120b1b;
  --bg-card: #170f22;
  --bg-card-hover: #20152f;
  --border: #33224a;
  --border-subtle: #22172f;
  --text: #ffffff;
  --text-muted: #cdbfe0;
  --text-dim: #b7a8cc;
  --accent: #ff7a1a;
  --accent-hover: #ff9447;
  --accent-deep: #673AB7;
  --accent-pink: #a3e635;
}

/* Halloween é sempre no escuro */
html.tema-halloween #themeBtn {
  display: none !important;
}

/* 2. Fundo com brilho roxo e laranja de lua */
html.tema-halloween body {
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(103, 58, 183, 0.28), transparent 62%),
    radial-gradient(760px 460px at 102% 2%, rgba(255, 122, 26, 0.14), transparent 60%),
    var(--bg-body);
}

/* 3. Faixa do topo */
html.tema-halloween .top-bar {
  background: linear-gradient(90deg, #1c0b2b, #000000 50%, #1c0b2b);
  color: #cdbfe0;
}
html.tema-halloween .top-bar span strong {
  color: var(--accent);
}

/* 4. Gosma verde escorrendo embaixo do topo do site */
html.tema-halloween header {
  border-bottom-color: #a3e635;
}
html.tema-halloween header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -21px;
  height: 22px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='22' viewBox='0 0 120 22'%3E%3Cpath fill='%23a3e635' d='M0 0h120v5c-4 0-5 2-6 6s-1 9-3 9-3-4-3-9-1-6-5-6H78c-3 0-4 1-4 4s-1 5-2 5-2-2-2-5-1-4-4-4H40c-3 0-4 2-4 7s-1 10-3 10-3-5-3-10-1-7-4-7H12C8 5 8 7 7 9S6 13 5 13 4 11 4 9 3 5 0 5z'/%3E%3C/svg%3E") repeat-x top left / 120px 22px;
  filter: drop-shadow(0 2px 4px rgba(163, 230, 53, 0.35));
}

/* 5. Títulos das seções com brilho roxo */
html.tema-halloween .section-title-wrap h2,
html.tema-halloween h2 {
  text-shadow: 0 0 18px rgba(165, 112, 244, 0.55);
}

/* 6. Botões e preços em laranja abóbora */
html.tema-halloween .btn-main {
  box-shadow: 0 6px 20px rgba(255, 122, 26, 0.4);
}
html.tema-halloween .btn-main:hover {
  box-shadow: 0 10px 28px rgba(255, 122, 26, 0.6);
}
html.tema-halloween .price-tag {
  text-shadow: 0 0 12px rgba(255, 122, 26, 0.35);
}

/* 7. Cards com contorno que acende em laranja */
html.tema-halloween .product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 10px 30px rgba(255, 122, 26, 0.18);
}
html.tema-halloween .cat-card-btn {
  border-color: #33224a;
}
html.tema-halloween .cat-card-btn:hover {
  border-color: var(--accent);
}

/* 8. Rodapé com gosma no alto */
html.tema-halloween footer {
  background: #07040b;
  border-top: 3px solid #a3e635;
}

/* 9. Banner do Halloween (logo em gosma + Fly bruxa), criado pelo halloween.js */
.hw-banner {
  position: relative;
  max-width: 1360px;
  margin: 28px auto 8px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  border: 2px solid #4a2d6e;
  border-radius: 20px;
  background:
    radial-gradient(420px 220px at 85% 40%, rgba(255, 122, 26, 0.22), transparent 70%),
    radial-gradient(520px 260px at 10% 0%, rgba(103, 58, 183, 0.35), transparent 70%),
    #110a19;
  overflow: hidden;
  box-sizing: border-box;
}
.hw-logo {
  width: min(320px, 70%);
  height: auto;
  display: block;
  margin-bottom: 6px;
}
.hw-texto {
  position: relative;
  z-index: 2;
}
.hw-chamada {
  font-family: 'New Hero Super', sans-serif;
  color: #a3e635;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 4px 0 6px;
}
.hw-banner h2 {
  font-family: 'New Hero Super Italic', 'New Hero Super', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffffff;
  text-wrap: balance;
}
.hw-onde {
  color: #cdbfe0;
  margin-top: 8px;
  font-size: 0.95rem;
}
.hw-onde strong { color: #ffffff; }
.hw-programacao {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 0;
}
.hw-programacao li {
  background: rgba(165, 112, 244, 0.16);
  border: 1px solid #4a2d6e;
  color: #ffffff;
  border-radius: 9999px;
  padding: 6px 12px;
  font-size: 0.88rem;
}
.hw-programacao a { color: #a3e635; }
.hw-cupom {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px dashed #ff7a1a;
  border-radius: 14px;
  background: rgba(255, 122, 26, 0.08);
  max-width: 520px;
}
.hw-cupom p { color: #cdbfe0; font-size: 0.9rem; margin: 0; }
.hw-cupom strong { color: #ff7a1a; }
.hw-cupom-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.hw-cupom-codigo {
  font-family: 'New Hero Super', monospace;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: #ffffff;
  background: #000000;
  border-radius: 10px;
  padding: 8px 14px;
}
.hw-btn-copiar {
  background: #ff7a1a;
  border: none;
  cursor: pointer;
}
.hw-cupom-aviso { min-height: 1.2em; margin-top: 6px !important; color: #a3e635 !important; }
.hw-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 9999px;
  font-family: 'New Hero Super', sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
}
.hw-btn-laranja { background: #ff7a1a; }
.hw-btn-gosma { background: #a3e635; }
.hw-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
.hw-bruxa {
  position: relative;
  z-index: 2;
  width: 230px;
  height: auto;
}

/* 10. Enfeites (artes e desenhos): nunca bloqueiam clique */
.hw-enfeite {
  position: absolute;
  pointer-events: none;
  height: auto;
  z-index: 1;
}
.hw-morcego-1 { width: 70px; top: 14px; right: 260px; transform: rotate(-12deg); }
.hw-morcego-2 { width: 44px; top: 54px; right: 330px; transform: rotate(10deg); opacity: 0.85; }
.hw-fantasma-1 { width: 54px; bottom: 14px; right: 268px; opacity: 0.9; }
.hw-caldeirao { width: 84px; bottom: 10px; left: 46%; opacity: 0.95; }

.hw-vampiro { width: 120px; top: -18px; right: 12px; z-index: 2; }
.hw-mumia { width: 130px; top: -10px; right: 340px; z-index: 2; }
.hw-fantasma-2 { width: 44px; top: 24px; right: 490px; opacity: 0.85; }

html.tema-halloween footer { overflow: visible; }
.hw-zumbi { width: 160px; top: -104px; right: 24px; z-index: 2; }
.hw-gato { width: 58px; top: -66px; left: 20px; }
.hw-abobora-1 { width: 46px; top: -40px; right: 196px; }
.hw-abobora-2 { width: 34px; top: -30px; right: 240px; }

/* Fly abóbora do WhatsApp com bolinha escura atrás (não some em cima de foto branca) */
.hw-fly-abobora {
  background: radial-gradient(circle, #1a1024 58%, rgba(26, 16, 36, 0) 72%);
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
  object-fit: contain;
}

/* Carrinho vazio: a lata monstro no lugar do carrinho de emoji */
html.tema-halloween #cartItemsList > div:only-child > div:first-child {
  font-size: 0 !important;
  width: 96px;
  height: 160px;
  margin: 0 auto 12px;
  background: url("halloween/lata-monstro.webp") center / contain no-repeat;
  opacity: 1 !important;
}

/* Celular */
@media (max-width: 640px) {
  .hw-banner {
    margin: 20px 16px 4px;
    padding: 22px 18px 18px;
    grid-template-columns: minmax(0, 1fr);
  }
  .hw-logo { width: 100%; max-width: 180px; }
  .hw-bruxa { position: absolute; width: 96px; top: 2px; right: 6px; }
  .hw-banner h2 { padding-right: 4px; }
  .hw-btn { white-space: nowrap; }
  .hw-morcego-1 { width: 46px; top: 8px; right: 110px; }
  .hw-morcego-2, .hw-fantasma-1 { display: none; }
  .hw-caldeirao { width: 56px; bottom: 8px; left: auto; right: 14px; }
  .hw-vampiro { display: none; }
  .hw-mumia { width: 84px; top: -6px; right: 6px; }
  .hw-fantasma-2 { display: none; }
  .hw-zumbi { width: 112px; top: -74px; right: 12px; }
  .hw-gato { width: 44px; top: -50px; left: 12px; }
  .hw-abobora-1 { width: 34px; top: -30px; right: 132px; }
  .hw-abobora-2 { display: none; }
}

/* 11. Movimento leve (só pra quem não pediu menos movimento) */
@media (prefers-reduced-motion: no-preference) {
  .hw-bruxa { animation: hw-voo 5s ease-in-out infinite; }
  .hw-fantasma-1, .hw-fantasma-2 { animation: hw-flutua 4s ease-in-out infinite; }
  @keyframes hw-voo {
    0%, 100% { transform: translate(0, 0) rotate(-3deg); }
    50% { transform: translate(-8px, -10px) rotate(2deg); }
  }
  @keyframes hw-flutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
  }
}

/* 12. Brilho dos títulos piscando de leve (só pra quem não pediu menos movimento) */
@media (prefers-reduced-motion: no-preference) {
  html.tema-halloween .section-title-wrap h2 {
    animation: odd-halloween-brilho 4s ease-in-out infinite;
  }
  @keyframes odd-halloween-brilho {
    0%, 100% { text-shadow: 0 0 18px rgba(165, 112, 244, 0.55); }
    48% { text-shadow: 0 0 18px rgba(165, 112, 244, 0.55); }
    50% { text-shadow: 0 0 26px rgba(255, 122, 26, 0.75); }
    54% { text-shadow: 0 0 18px rgba(165, 112, 244, 0.55); }
  }
}