/**
 * Preço e caixa de compra da campanha
 * (helpers/ur_campanha_preco.php e ur_campanha_compra.php).
 *
 * Medidas da TELA 03: pacotes em grade 3×, controle de quantidade e o
 * botão ABAIXO dele — com ícone, subtítulo e total à direita —, seguido do
 * colapsável do regulamento.
 *
 * Cores por token (TOKENS.md). O pacote selecionado usa --ur-pkg-sel-*, que
 * já existia para esse papel e bate valor a valor com a referência.
 */

/* ── Por apenas ───────────────────────────────────────────────────── */

.ur-cpr {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* O bloco seguinte traz a própria margem de 8px, que colapsaria com a
     daqui no Flexbox/Grid do legado e deixava a base com o dobro do topo.
     Só a de cima fica neste bloco. */
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  /* O rótulo fica sobre o fundo da PÁGINA, que no legado ainda é a cor
     livre do painel (--tema-page-bg). Por isso a tinta vem de
     --tema-page-fg, com --ur-tx como fallback para as telas já no V2. */
  color: var(--tema-page-fg, var(--ur-tx, #111111));
}

/* Só o valor entra na caixa; o rótulo fica como texto ao lado dele. */
.ur-cpr__box {
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  border: 1px solid var(--ur-line, #e1e1d9);
  /* Dentro da caixa o fundo é o do card, então a tinta volta ao token. */
  color: var(--ur-tx, #111111);
}

/* ── Caixa de compra ──────────────────────────────────────────────── */

.ur-cmp {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.ur-cmp__packs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ur-cmp__pack {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 12px 2px 10px;
  border: 1px solid var(--ur-line, #e1e1d9);
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  font-family: inherit;
  cursor: pointer;
}

.ur-cmp__pack b {
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
}

.ur-cmp__sel {
  font-size: 10px;
  letter-spacing: .25px;
  text-transform: uppercase;
  opacity: .85;
}

.ur-cmp__pack.is-popular {
  background: var(--ur-pkg-sel-bg, #111111);
  color: var(--ur-pkg-sel-tx, var(--ur-accent, #5fe000));
  border: 2px solid var(--ur-accent, #5fe000);
}

.ur-cmp__pack.is-off {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

.ur-cmp__pop {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--ur-accent, #5fe000);
  color: var(--ur-accent-ink, #0a1600);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

/* Quantidade: mantém .vendasExpressNums porque o CSS do painel
   (set-custom-style.php) pinta .numeroChange por essa âncora. */
.ur-cmp__qty {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
}

.ur-cmp__qty .numeroChange {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--ur-tx, #111111);
  line-height: 1;
  cursor: pointer;
}

/* O glifo bi-dash-circle/bi-plus-circle já traz o círculo desenhado, então
   uma borda em volta criava um anel duplo com o ícone fora de centro. */
.ur-cmp__qty .numeroChange .bi {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.ur-cmp__qty .qty,
.ur-cpg input.qty {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--ur-line, #e1e1d9);
  border-radius: 10px;
  background: var(--ur-card, #ffffff);
  color: var(--ur-tx, #111111);
  text-align: center;
  /* ≥16px: abaixo disso o iOS Safari dá zoom ao focar o campo. */
  font-size: 20px;
  font-weight: 700;
}

/* Botão abaixo do ±, não ao lado. */
.ur-cmp__cta,
.ur-cmp__cta b,
.ur-cmp__cta small,
.ur-cmp__cta .ur-cmp__cta-tot {
  color: var(--ur-accent-ink, #0a1600);
}

.ur-cmp__cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ur-accent, #5fe000);
  color: var(--ur-accent-ink, #0a1600);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Sem regra de hover o botão herdava o fundo do user-agent e o texto ficava
   ilegível ao passar o mouse.
   O escurecimento precisa ser perceptível: brightness(.94) sobre o rosa
   (229,23,140) mexia 14 de 255 no canal mais forte — o olho não via. Com .88
   mais uma sombra e um leve deslocamento, o retorno fica claro sem trocar as
   cores do tema. */
.ur-cmp__cta {
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ur-cmp__cta:hover,
.ur-cmp__cta:focus-visible {
  background: var(--ur-accent, #5fe000);
  filter: brightness(0.88);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ur-cmp__cta {
    transition: none;
  }
  .ur-cmp__cta:hover,
  .ur-cmp__cta:focus-visible {
    transform: none;
  }
}

.ur-cmp__cta:hover,
.ur-cmp__cta:hover b,
.ur-cmp__cta:hover small,
.ur-cmp__cta:hover .ur-cmp__cta-tot,
.ur-cmp__cta:focus-visible,
.ur-cmp__cta:focus-visible b,
.ur-cmp__cta:focus-visible small,
.ur-cmp__cta:focus-visible .ur-cmp__cta-tot {
  color: var(--ur-accent-ink, #0a1600);
}

.ur-cmp__cta:active {
  transform: scale(.97);
}

.ur-cmp__cta-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ur-accent-ink, #0a1600);
  color: var(--ur-accent, #5fe000);
}

.ur-cmp__cta-txt b {
  display: block;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}

.ur-cmp__cta-txt small {
  font-size: 12px;
  line-height: 16px;
  opacity: .8;
}

.ur-cmp__cta-tot {
  font-size: 14px;
  font-weight: 700;
}

/* ── Descrição/Regulamento ────────────────────────────────────────── */

.ur-cmp__acc {
  overflow: hidden;
  /* Mesmo raio do botão: na referência é 16px, mas destoa do CTA logo acima. */
  border-radius: 8px;
  background: var(--ur-card, #ffffff);
}

.ur-cmp__reg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  background: none;
  color: var(--ur-tx, #111111);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.ur-cmp__chev {
  position: absolute;
  right: 14px;
  transition: transform .2s;
}

.ur-cmp__reg[aria-expanded="true"] .ur-cmp__chev {
  transform: rotate(180deg);
}

.ur-cmp__acc-body {
  padding: 0 16px 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--ur-mu, #5e5e57);
}

/* ── Termos de Uso (campanha.termos) ──────────────────────────────── */

/* Mesma caixa do regulamento, separada dele por um respiro. */
.ur-cmp__terms {
  margin-top: 8px;
}

.ur-cmp__terms-lead {
  margin: 0 0 8px;
  font-weight: 700;
  color: var(--ur-tx, #111111);
}

.ur-cmp__terms-list {
  margin: 0;
  padding-left: 18px;
}

.ur-cmp__terms-list li {
  margin-bottom: 6px;
}

.ur-cmp__terms-list li:last-child {
  margin-bottom: 0;
}

.ur-cmp__terms-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--ur-accent-link, var(--ur-accent, #e5178c));
  font-weight: 700;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .ur-cmp__chev {
    transition: none;
  }
}