/* VLPag v0.5.4.7 — correção do ícone visível no cabeçalho
   O cartão é desenhado por ::before e não depende do HTML interno. */

.brand-icon {
    width: 70px !important;
    height: 70px !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
    margin-bottom: 15px !important;
    padding: 0 !important;

    border: 1px solid rgba(149, 210, 255, .34) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(145deg, #36a2ff, #1266da) !important;

    box-shadow:
        0 12px 28px rgba(20, 116, 224, .38),
        inset 0 1px 0 rgba(255, 255, 255, .26) !important;

    overflow: hidden !important;
}

/* Oculta qualquer marca antiga que ainda exista dentro do container. */
.brand-icon > svg,
.brand-icon > img {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Símbolo oficial do cartão enviado pelo usuário. */
.brand-icon::before {
    content: "" !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    background:
        url('/vlpag/assets/vlpag-card-symbol-white.svg?v=0547')
        center / contain no-repeat !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
}