/**
 * Prêmios por horário (helpers/ur_campanha_premios_horario.php).
 *
 * Formato do card `.promo` da referência: título, chamada, contador,
 * lista de prêmios e as pílulas de Início/Fim.
 *
 * As classes ps-* continuam porque são contrato: o JS do componente lê
 * .ps-timer[data-ps-timer-*] para o relógio ao vivo, o gerador de imagem
 * do webhook recorta #ps-widget-wrapper e assets/css/sp-campaign.css
 * sobrescreve .ps-widget no tema SP.
 */

.ur-psh {
  position: relative;
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 8px 0;
  padding: 14px 12px;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background-color: var(--ur-psh-bg, #2b2b26);
  color: var(--ur-psh-tx, #ffffff);
}

/* Filho de flex/grid nasce com min-width:auto e não encolhe abaixo do
   min-content. Título longo e linha prêmio+ganhador+chip passavam da
   viewport no iPhone (medido: 431px numa tela de 390). */
.ur-psh > * {
  max-width: 100%;
  min-width: 0;
}

/* No escuro o card escurece a pílula; a cor de fundo é da paleta abaixo. */
[data-ur-theme="dark"] .ur-psh {
  --ur-psh-pill: rgba(0, 0, 0, .35);
}

/* ── Uma cor por promoção ─────────────────────────────────────────────
   Duas promoções rodando juntas viram um bloco só se tiverem o mesmo
   tom. A variante sai do id da regra (ur_psh_paleta), então é estável
   entre recarregamentos. A primeira é o acento do modelo; as outras
   derivam dos tons de estado do TOKENS.md, que existem nos 6 modelos. */

.ur-psh.ur-psh--a { --ur-psh-bg: var(--ur-accent, #e5178c); --ur-psh-tx: var(--ur-accent-ink, #ffffff); }
.ur-psh.ur-psh--b { --ur-psh-bg: #f0b90b; --ur-psh-tx: #241c00; }
.ur-psh.ur-psh--c { --ur-psh-bg: #15803d; --ur-psh-tx: #ffffff; }
.ur-psh.ur-psh--d { --ur-psh-bg: #3f3f8a; --ur-psh-tx: #ffffff; }

/* Encerrado: zebrado e tudo em cinza, como na referência. O card sai da
   disputa visual e as promoções ativas é que ficam coloridas. A classe
   entra pelo PHP e o JS a mantém quando o relógio zera. */
.ur-psh.is-ended {
  --ur-psh-bg: #6b6b66;
  --ur-psh-tx: #f2f2f0;
  filter: grayscale(1);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 10px, transparent 10px 20px);
}

.ur-psh__title {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* "MENOR COTA — Carro Novo": o nome da promoção é livre e não diz como se
   ganha. O prefixo diz, e fica um tom abaixo para o nome seguir sendo o
   destaque. */
.ur-psh__what {
  opacity: .72;
}

.ur-psh__sep {
  opacity: .45;
}

.ur-psh__sub {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  text-transform: uppercase;
  opacity: .9;
}

/* ── Contador ─────────────────────────────────────────────────────── */

.ur-psh__cd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 6px;
  border-radius: 99px;
  background: var(--ur-psh-pill, rgba(255, 255, 255, .14));
  color: inherit;
}

.ur-psh__cd small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
}

.ur-psh__cd b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

/* ── Encerrado: faixa listrada ────────────────────────────────────────
   O zebrado é exclusivo do fim; enquanto a promoção roda, o contador
   fica liso para não competir com a chamada. */

.ur-psh__closed,
.ur-psh .ps-timer.ended {
  width: 100%;
  padding: 8px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #ffffff;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 12px, rgba(0, 0, 0, .18) 12px 24px),
    var(--ur-psh-pill, rgba(255, 255, 255, .14));
  background-size: 34px 34px, auto;
}

/* ── Prêmios, no formato do "Confira os prêmios" das caixinhas ────── */

.ur-psh__list {
  display: grid;
  gap: 6px;
  width: 100%;
}

.ur-psh__pz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  font-size: 12px;
  text-align: left;
}

.ur-psh__pzl {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 0;
  min-width: 0;
}

/* Coluna da direita: quem está levando, a cota dele embaixo e a taça
   ao lado. A taça ocupa as duas linhas (grid-row 1/-1) para centrar no
   bloco inteiro em vez de ficar presa ao topo quando o chip aparece. */
.ur-psh__pzr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: end;
  justify-items: end;
  align-items: center;
  column-gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 46%;
}

.ur-psh__pzw {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  flex: none;
  opacity: .8;
}

.ur-psh__pz.is-taken .ur-psh__pzw {
  opacity: 1;
}

/* A medalha é irmã do nome, com eixo próprio, para poder crescer sem
   arrastar a linha de base do texto. */
.ur-psh__pzm {
  flex: none;
  font-size: 20px;
  line-height: 1;
}

.ur-psh__pzn {
  display: block;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etiqueta da cota/contagem, no mesmo desenho do número de
   .ur-cx__tk-num (assets/css/campanha/caixinhas.css): fundo claro, peso
   700 e numeral tabular. Fica embaixo do nome de quem está levando — é
   a cota dele, não do prêmio. */
.ur-psh__pzq {
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--ur-psh-tag, rgba(255, 255, 255, .85));
  /* Chip sempre claro: número preto em qualquer tema. */
  color: #000;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ur-psh__st {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
}

/* Prêmio com dono: o nome ganha peso e o fundo, destaque. */
.ur-psh__pz.is-taken {
  background: rgba(255, 255, 255, .2);
}

.ur-psh__pz.is-taken .ur-psh__st {
  opacity: 1;
  font-weight: 700;
}

/* ── Posições, em lista (card sem prêmios nomeados) ───────────────── */

.ur-psh__wins {
  display: grid;
  gap: 6px;
  width: 100%;
}

.ur-psh__win {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  text-align: left;
}

.ur-psh__pos {
  font-size: 15px;
  line-height: 1;
}

.ur-psh__tk {
  padding: 3px 8px;
  border-radius: 8px;
  background: #ffffff;
  color: #000;
  font: 700 13px/18px var(--ur-font, Montserrat, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}

.ur-psh__nome {
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ur-psh__badge {
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  white-space: nowrap;
}

.ur-psh__empty {
  padding: 10px;
  font-size: 13px;
  opacity: .7;
}

/* ── Datas ────────────────────────────────────────────────────────── */

.ur-psh__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.ur-psh__pill {
  max-width: 100%;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--ur-psh-pill, rgba(255, 255, 255, .14));
  font-size: 10px;
  line-height: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

/* Emoji vira <img> Twemoji na imagem do webhook (pages/products/inc/_ps_emoji.php). */
.ps-emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin: 0 .05em;
  vertical-align: -.125em;
}

/* ── Animações (só para quem não pediu menos movimento) ───────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Listras do ENCERRADO correndo, como na referência. */
  .ur-psh__closed,
  .ur-psh .ps-timer.ended {
    animation: ur-psh-slide 1.2s linear infinite;
  }

  /* Última hora: o horário pulsa. A classe entra pelo JS. */
  .ur-psh__cd.is-urgent {
    animation: ur-psh-urg 1s ease-in-out infinite;
  }

  /* Últimos 30 min: a chamada chama atenção de tempos em tempos — um
     ciclo curto a cada 4s, para alertar sem virar pisca-pisca. */
  .ur-psh__sub.is-final {
    animation: ur-psh-call 4s ease-in-out infinite;
  }

  /* Prêmios entram escalonados quando o card aparece. */
  .ur-psh__pz,
  .ur-psh__win {
    animation: ur-psh-in .4s ease-out both;
  }

  .ur-psh__pz:nth-child(2),
  .ur-psh__win:nth-child(2) { animation-delay: .06s; }
  .ur-psh__pz:nth-child(3),
  .ur-psh__win:nth-child(3) { animation-delay: .12s; }
  .ur-psh__pz:nth-child(n+4),
  .ur-psh__win:nth-child(n+4) { animation-delay: .18s; }
}

@keyframes ur-psh-slide {
  to { background-position: 34px 0, 0 0; }
}

@keyframes ur-psh-urg {
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(215, 35, 35, .25);
  }
}

@keyframes ur-psh-call {
  0%, 70%, 100% { transform: none; opacity: .9; }
  78% { transform: scale(1.06); opacity: 1; }
  86% { transform: none; opacity: .9; }
  94% { transform: scale(1.06); opacity: 1; }
}

@keyframes ur-psh-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}