/* ===== LINK PUBLICO DE COBRANCA RENDERIZADO NO SERVIDOR (AB#242) =====
   Pagina do host (Components/Pages/Payments/Cobranca.razor), dentro do PublicLayout, e so o documento das paginas
   estaticas carrega este arquivo. Sem MudBlazor: cartao, campo, botoes e avisos reaproveitam as classes de
   public-account.css e home-customization.css, e as cores leem as --mud-palette-* do tema da casa. */

/* O botao de copiar e os avisos dele nascem com hidden e o public-charge.js os mostra. O display do .home-button
   ganharia do [hidden] do navegador, e o botao apareceria morto para quem esta sem JavaScript. */
.cobranca [hidden] {
    display: none !important;
}

.cobranca__rotulo {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    text-align: center;
}

.cobranca__valor {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.cobranca__centro {
    text-align: center;
}

.cobranca__qr {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

/* O copia e cola e uma sequencia longa sem espaco: sem quebrar em qualquer ponto, estoura a largura do celular.
   Sem word-break: break-all, que cortaria a linha digitavel do boleto no meio de um bloco em vez de nos espacos. */
.cobranca__codigo {
    resize: vertical;
    overflow-wrap: anywhere;
}

.cobranca__dica {
    font-size: 0.75rem;
    line-height: 1.66;
    color: var(--mud-palette-text-secondary);
}

.cobranca__pago {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    text-align: center;
}

.cobranca__pago-icone {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--mud-palette-success);
}