/*
 * Selo de Giftback.
 *
 * O plugin traz o layout; o tema ajusta pelas variáveis abaixo. O padrão lê os tokens do tema de blocos
 * (Vitrine: surface, contrast, success, border; raios custom.radius.*) e cai em neutros sem eles.
 * Seletores de uma classe: perdem para qualquer regra do tema com uma classe a mais.
 */
.rx-giftback {
  --rx-giftback-bg: var(--wp--preset--color--surface, #f3f2ef);
  --rx-giftback-text: var(--wp--preset--color--contrast, #111);
  --rx-giftback-value: var(--wp--preset--color--success, #2e7d32);
  --rx-giftback-icon: currentColor;
  --rx-giftback-border: transparent;
  --rx-giftback-radius: var(--wp--custom--radius--md, 10px);
  --rx-giftback-single-bg: var(--rx-giftback-bg);
  --rx-giftback-single-border: var(--wp--preset--color--border, #e3e3e3);
  --rx-giftback-single-radius: var(--wp--custom--radius--pill, 999px);
  --rx-giftback-font-size: var(--wp--preset--font-size--small, 0.875rem);
  --rx-giftback-gap: 0.5em;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rx-giftback-gap);
  box-sizing: border-box;
  padding: 0.6em 1em;
  border: 1px solid var(--rx-giftback-border);
  border-radius: var(--rx-giftback-radius);
  background: var(--rx-giftback-bg);
  color: var(--rx-giftback-text);
  font-size: var(--rx-giftback-font-size);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.rx-giftback__icon {
  flex: none;
  width: 1.4em;
  height: 1.4em;
  color: var(--rx-giftback-icon);
}

.rx-giftback__value {
  color: var(--rx-giftback-value);
  font-weight: 700;
}

.rx-giftback__value,
.rx-giftback__label {
  white-space: nowrap;
}

/* Cartão: faixa na largura do cartão, embaixo do preço. */
.rx-giftback--card {
  width: 100%;
  margin-block-start: var(--wp--preset--spacing--10, 0.5rem);
  padding: 0.55em 0.6em;
  gap: 0.4em;
}

/* Página do produto: pílula, do tamanho do texto, ao lado ou embaixo do preço conforme o layout do tema. */
.rx-giftback--single {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 0.45em 1em;
  border-color: var(--rx-giftback-single-border);
  border-radius: var(--rx-giftback-single-radius);
  background: var(--rx-giftback-single-bg);
}