/* ER ver8 — badges de produto V5+ (cores da marca + gradiente + gloss + brilho animado)
 *
 * Substitui o look "plano" do tema base:
 *   - Background sólido `$brand-primary` (verde/azul genérico) → gradiente vertical 3-stops
 *   - Sem profundidade → gloss top + sombra exterior + inset shadow
 *   - Sem destaque → sweep diagonal de luz animado a cada 3.5s
 *
 * Esquema cromático coerente com a marca:
 *   - "Novo" (new) / "Online apenas" (online-only) / "Pack" → azul ER #1860A3 (gradient)
 *   - "Em promoção" (on-sale) → laranja ER #f57c00 (gradient)
 *
 * Selectors com hierarquia ([class*='product-flag'] + .new/.on-sale/etc.) para
 * vencer a especificidade do tema base sem usar !important. */

/* ============================================================
   Base — todos os product-flag tipos
   ============================================================ */
.tvproduct-flags li.product-flag,
.product-flags li.product-flag {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 5px 12px -3px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.22) inset,
    0 -1px 2px rgba(0, 0, 0, 0.15) inset;
}

/* Gloss top — reflexo de luz no topo (50% altura) */
.tvproduct-flags li.product-flag::before,
.product-flags li.product-flag::before {
  content: '';
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  border-radius: 5px 5px 0 0;
  pointer-events: none;
  z-index: 1;
}

/* Sweep diagonal animado — passagem de luz a cada 3.5s */
.tvproduct-flags li.product-flag::after,
.product-flags li.product-flag::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: er-flag-shine 3.5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes er-flag-shine {
  0%, 60% { left: -120%; }
  100%    { left: 220%; }
}

/* Stagger: se houver 2+ badges empilhados, atrasa o brilho do segundo
 * para não brilharem em uníssono (visualmente menos agressivo) */
.tvproduct-flags li.product-flag:nth-child(2)::after,
.product-flags li.product-flag:nth-child(2)::after {
  animation-delay: 1.2s;
}
.tvproduct-flags li.product-flag:nth-child(3)::after,
.product-flags li.product-flag:nth-child(3)::after {
  animation-delay: 2.4s;
}

/* ============================================================
   Cores — Azul ER (Novo / Online apenas / Pack / Bestseller)
   ============================================================ */
.tvproduct-flags li.product-flag.new,
.product-flags li.product-flag.new,
.tvproduct-flags li.product-flag.online-only,
.product-flags li.product-flag.online-only,
.tvproduct-flags li.product-flag.pack,
.product-flags li.product-flag.pack {
  background: linear-gradient(180deg, #2978b5 0%, #1860A3 50%, #144f87 100%);
}

/* ============================================================
   Cores — Laranja ER (Promoção / Em destaque)
   ============================================================ */
.tvproduct-flags li.product-flag.on-sale,
.product-flags li.product-flag.on-sale,
.tvproduct-flags li.product-flag.discount,
.product-flags li.product-flag.discount {
  background: linear-gradient(180deg, #ff9d3a 0%, #f57c00 50%, #cc6300 100%);
}

/* ============================================================
   Override do tema base — anular regras antigas conflituosas
   ============================================================ */
/* "on-sale" no tema base era width:100% + text-align:center + left:0
 * (ocupava toda a largura). Voltamos para inline para combinar com "new". */
.tvproduct-flags.tvproduct-sale-pack-wrapper li.product-flag.on-sale,
.product-flags li.product-flag.on-sale {
  width: auto;
  text-align: left;
  left: auto;
}

/* "online-only" no tema base tinha top:25rem (posição estranha) — voltar para top:0 */
.tvproduct-flags li.product-flag.online-only,
.product-flags li.product-flag.online-only {
  top: 0;
  right: auto;
}

/* Esconder o ícone Material "online-only" injectado por ::before do tema */
.tvproduct-flags li.product-flag.online-only::before,
.product-flags li.product-flag.online-only::before {
  /* Sobreescreve o ::before do tema (que punha o ícone) com o nosso gloss top */
  content: '';
  font-family: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 50%;
  margin: 0;
  vertical-align: baseline;
  border-radius: 5px 5px 0 0;
}

/* ============================================================
   Mobile — escala ligeira (mantém proporção)
   ============================================================ */
@media (max-width: 575px) {
  .tvproduct-flags li.product-flag,
  .product-flags li.product-flag {
    padding: 6px 12px;
    font-size: 10.5px;
    letter-spacing: 0.3px;
    border-radius: 5px;
  }
}

/* ============================================================
   Reduced motion — desactivar brilho para utilizadores com
   preferência por movimento reduzido (acessibilidade)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tvproduct-flags li.product-flag::after,
  .product-flags li.product-flag::after {
    animation: none;
    display: none;
  }
}