/**
 * Linha "NO PIX · R$ 179,55 · 5% de desconto" no carrinho.
 *
 * Arquivo próprio, legível, porque o CSS principal do plugin vive num bundle
 * minificado que não é recompilado desde o pipeline 3.0.6 e não tem fonte.
 *
 * As cores são tokens no próprio bloco: a loja que quiser outro verde
 * redefine --pp-hint-accent no tema, sem precisar sobrescrever cada regra.
 */
.pp-discount-hint {
	--pp-hint-accent: #0f8a4a;
	--pp-hint-soft: #e7f6ed;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 8px 0 0;
	line-height: 1.2;
}

/* A pílula: verde cheio, texto miúdo em caixa alta. É o que dá o "NO PIX"
   como selo em vez de frase corrida. */
.pp-discount-hint__badge {
	flex: 0 0 auto;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--pp-hint-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	white-space: nowrap;
}

/* O valor é o que o olho tem de pegar primeiro. */
.pp-discount-hint__value {
	font-size: 15px;
	font-weight: 700;
	color: var(--pp-hint-accent);
	white-space: nowrap;
}

/* O quanto de desconto é apoio: fundo verde claro, sem competir com o valor. */
.pp-discount-hint__off {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--pp-hint-soft);
	color: var(--pp-hint-accent);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* Dentro do carrinho lateral, respiro igual ao das linhas de total. */
#fkcart-modal .pp-discount-hint {
	padding-top: 2px;
}

/* No carrinho padrão a linha entra na tabela de totais: sem borda em cima,
   para não parecer um total a mais. */
.pp-discount-hint-row td {
	border-top: 0 !important;
	padding-top: 0 !important;
}

/* Tela estreita: se as três peças não couberem, o desconto desce sozinho e
   a pílula continua ao lado do valor. */
@media (max-width: 360px) {
	.pp-discount-hint {
		gap: 5px;
	}

	.pp-discount-hint__value {
		font-size: 14px;
	}
}