/* Calculadora de Black Friday: ajustes locais sobre components.css. */

/* "R$" antes do valor, com o mesmo peso do número digitado (como no mockup). */

/* Dica do "leve X, pague Y" fica logo abaixo da linha de dois campos. */
.bf .bf-buy-hint{margin-top:-12px}

/* Cartões: 3 por linha no desktop, como no mockup (o 4º quebra para a linha de baixo). */
@media (min-width:960px){.bf .bf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Foco programático na área de resultado (botão "Calcular") sem contorno grosso no bloco inteiro. */
.bf .nf-results:focus{outline:0}
.bf .nf-results:focus-visible{outline:2px solid var(--graphite-950);outline-offset:4px;border-radius:var(--radius-lg)}

/* Celular: o segmentado de três opções quebra o texto em duas linhas sem espremer. */
@media (max-width:599px){.bf .nf-segmented button{padding:4px 6px}}

/* Campo de moeda vazio: some o "R$" para o exemplo (placeholder) não parecer um valor preenchido. */
.bf .nf-field__control:has(input:placeholder-shown) .nf-field__prefix{display:none}
.bf .nf-field__control input::placeholder{color:var(--ink-muted);font-weight:400}