/*
 * Icones SVG e botoes de compartilhamento (2026-09-15).
 *
 * Substituem o plugin Easy Social Share Buttons 3.5 e o Font Awesome 4.2 que
 * vinha dentro dele. O markup legado continua usando <i class="fa fa-plus">:
 * aqui o ::before desenha o icone por mascara SVG na cor do texto
 * (currentColor), sem fonte de icones.
 *
 * Paths: Font Awesome 4.7 (SIL OFL 1.1, fontawesome.io) e, no logo do X,
 * Simple Icons (CC0 1.0).
 */

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .fa::before {
        content: "" !important;
        display: inline-block;
        width: 1em;
        height: 1em;
        vertical-align: -0.125em;
        background-color: currentColor;
        -webkit-mask: var(--vp-icon) no-repeat center / contain;
        mask: var(--vp-icon) no-repeat center / contain;
    }
    .fa-plus {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-192 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M1408 800v-192q0 -40 -28 -68t-68 -28h-416v-416q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v416h-416q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h416v416q0 40 28 68t68 28h192q40 0 68 -28t28 -68v-416h416q40 0 68 -28t28 -68z'/%3E%3C/svg%3E");
    }
    .fa-minus {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-192 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M1408 800v-192q0 -40 -28 -68t-68 -28h-1216q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h1216q40 0 68 -28t28 -68z'/%3E%3C/svg%3E");
    }
    .fa-times,
    .fa-remove,
    .fa-close {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-192 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M1298 214q0 -40 -28 -68l-136 -136q-28 -28 -68 -28t-68 28l-294 294l-294 -294q-28 -28 -68 -28t-68 28l-136 136q-28 28 -28 68t28 68l294 294l-294 294q-28 28 -28 68t28 68l136 136q28 28 68 28t68 -28l294 -294l294 294q28 28 68 28t68 -28l136 -136q28 -28 28 -68 t-28 -68l-294 -294l294 -294q28 -28 28 -68z'/%3E%3C/svg%3E");
    }
    .fa-info {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-576 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M640 192v-128q0 -26 -19 -45t-45 -19h-512q-26 0 -45 19t-19 45v128q0 26 19 45t45 19h64v384h-64q-26 0 -45 19t-19 45v128q0 26 19 45t45 19h384q26 0 45 -19t19 -45v-576h64q26 0 45 -19t19 -45zM512 1344v-192q0 -26 -19 -45t-45 -19h-256q-26 0 -45 19t-19 45v192 q0 26 19 45t45 19h256q26 0 45 -19t19 -45z'/%3E%3C/svg%3E");
    }
    .fa-flag {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M320 1280q0 -72 -64 -110v-1266q0 -13 -9.5 -22.5t-22.5 -9.5h-64q-13 0 -22.5 9.5t-9.5 22.5v1266q-64 38 -64 110q0 53 37.5 90.5t90.5 37.5t90.5 -37.5t37.5 -90.5zM1792 1216v-763q0 -25 -12.5 -38.5t-39.5 -27.5q-215 -116 -369 -116q-61 0 -123.5 22t-108.5 48 t-115.5 48t-142.5 22q-192 0 -464 -146q-17 -9 -33 -9q-26 0 -45 19t-19 45v742q0 32 31 55q21 14 79 43q236 120 421 120q107 0 200 -29t219 -88q38 -19 88 -19q54 0 117.5 21t110 47t88 47t54.5 21q26 0 45 -19t19 -45z'/%3E%3C/svg%3E");
    }
    .fa-facebook {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-384 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M959 1524v-264h-157q-86 0 -116 -36t-30 -108v-189h293l-39 -296h-254v-759h-306v759h-255v296h255v218q0 186 104 288.5t277 102.5q147 0 228 -12z'/%3E%3C/svg%3E");
    }
}

/* Botoes de compartilhamento: vp_share_buttons() em includes/vp-share-buttons.php */
.vp-share__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    vertical-align: middle;
}
.vp-share__list li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vp-share__btn,
.vp-share__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.vp-share__btn:hover,
.vp-share__btn:focus {
    opacity: 0.85;
}
.vp-share__btn svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.vp-share__btn--facebook { background-color: #3b5999; }
.vp-share__btn--x        { background-color: #000; }
.vp-share__btn--linkedin { background-color: #2ba3e1; }
.vp-share__btn--whatsapp { background-color: #1d9e11; }


/* ============================================================
 * Favoritar no anuncio (2026-09-15) — barra de favoritar + compartilhar.
 * Markup: uz_upb_bookmark_controls() no tema pai (functions.php).
 * O coracao antigo era um recorte de images/icons-sprite.png; aqui vira
 * mascara SVG (Font Awesome 4.7, SIL OFL 1.1), como os demais icones.
 * ============================================================ */

.vp-fav {
    display: flex;
    align-items: center;
    gap: 8px;
    float: none;
}

.vp-fav .vp-fav__btn,
.vp-fav a.vp-fav__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    float: none;
    height: 40px;
    padding: 0 8px 0 14px;
    border: 1.5px solid #e2e2e6;
    border-radius: 999px;
    background: #fff;
    color: #0e0e0f;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s, background-color 0.15s;
}

.vp-fav a.vp-fav__btn:hover,
.vp-fav a.vp-fav__btn:focus,
.vp-fav a.vp-fav__btn.is-on {
    border-color: #d94a3d;
    background: #fdf3f2;
    color: #0e0e0f;
    text-decoration: none;
}

.vp-fav a.vp-fav__btn:focus-visible {
    outline: 2px solid #528425;
    outline-offset: 2px;
}

/* O coracao: mesma tecnica de mascara dos icones .fa acima. */
.vp-fav .bookmark-icon {
    width: 17px;
    height: 17px;
    background-image: none;
    background-color: #6b6b73;
    transition: background-color 0.15s;
}

.vp-fav a.vp-fav__btn:hover .bookmark-icon,
.vp-fav a.vp-fav__btn:focus .bookmark-icon,
.vp-fav a.vp-fav__btn.is-on .bookmark-icon {
    background-color: #d94a3d;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .vp-fav .bookmark-icon {
        -webkit-mask: var(--vp-icon) no-repeat center / contain;
        mask: var(--vp-icon) no-repeat center / contain;
    }

    .vp-fav .bookmark-icon.bookmark-add {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M1664 940q0 81 -21.5 143t-55 98.5t-81.5 59.5t-94 31t-98 8t-112 -25.5t-110.5 -64t-86.5 -72t-60 -61.5q-18 -22 -49 -22t-49 22q-24 28 -60 61.5t-86.5 72t-110.5 64t-112 25.5t-98 -8t-94 -31t-81.5 -59.5t-55 -98.5t-21.5 -143q0 -168 187 -355l581 -560l580 559 q188 188 188 356zM1792 940q0 -221 -229 -450l-623 -600q-18 -18 -44 -18t-44 18l-624 602q-10 8 -27.5 26t-55.5 65.5t-68 97.5t-53.5 121t-23.5 138q0 220 127 344t351 124q62 0 126.5 -21.5t120 -58t95.5 -68.5t76 -68q36 36 76 68t95.5 68.5t120 58t126.5 21.5 q224 0 351 -124t127 -344z'/%3E%3C/svg%3E");
    }

    .vp-fav .bookmark-icon.bookmark-remove {
        --vp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M896 -128q-26 0 -44 18l-624 602q-10 8 -27.5 26t-55.5 65.5t-68 97.5t-53.5 121t-23.5 138q0 220 127 344t351 124q62 0 126.5 -21.5t120 -58t95.5 -68.5t76 -68q36 36 76 68t95.5 68.5t120 58t126.5 21.5q224 0 351 -124t127 -344q0 -221 -229 -450l-623 -600 q-18 -18 -44 -18z'/%3E%3C/svg%3E");
    }
}

/* Contador dentro do botao: anula o balao cinza com bico do CSS antigo. */
.vp-fav .vp-fav__count {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    margin: 0;
    float: none;
    border: 0;
    border-radius: 999px;
    background: #f1f1f3;
    color: #6b6b73;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 26px;
}

.vp-fav .vp-fav__count:before {
    content: none;
}

.vp-fav a.vp-fav__btn.is-on .vp-fav__count {
    background: #fff;
    color: #d94a3d;
}

/* A faixa branca abaixo das imagens do anuncio: favoritar a esquerda,
   compartilhar a direita, link de favoritos embaixo. As alturas fixas vem
   do responsive.css do tema pai. */
.social-icons-floating .white-cnt.padding-cnt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    height: auto !important;
}

.social-icons-floating .soc-icon-right {
    float: none;
    margin-left: auto;
}

.social-icons-floating .ger-favoritos {
    flex-basis: 100%;
    margin: 0;
    font-size: 12.5px;
}

.social-icons-floating .ger-favoritos a {
    color: #528425;
}

@media only screen and (max-width: 560px) {
    .social-icons-floating .white-cnt.padding-cnt {
        justify-content: center;
    }

    .vp-fav,
    .vp-fav .vp-fav__btn,
    .vp-fav a.vp-fav__btn {
        width: 100%;
    }

    .vp-fav a.vp-fav__btn {
        justify-content: center;
    }

    .social-icons-floating .soc-icon-right {
        margin: 0 auto;
    }

    .social-icons-floating .ger-favoritos {
        text-align: center;
    }
}


/* Coracao da lista "Meus Favoritos" (lib/my_account/my_favorites.php).
   Mesmo sprite antigo do anuncio, em tamanho menor; aqui vira SVG tambem. */

.bookmark-icon-smaller {
    width: 20px;
    height: 20px;
    background-image: none;
    background-color: #6b6b73;
    transition: background-color 0.15s;
}

a:hover > .bookmark-icon-smaller,
a:focus > .bookmark-icon-smaller,
.bookmark-icon-smaller.bookmark-remove {
    background-color: #d94a3d;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .bookmark-icon-smaller {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M896 -128q-26 0 -44 18l-624 602q-10 8 -27.5 26t-55.5 65.5t-68 97.5t-53.5 121t-23.5 138q0 220 127 344t351 124q62 0 126.5 -21.5t120 -58t95.5 -68.5t76 -68q36 36 76 68t95.5 68.5t120 58t126.5 21.5q224 0 351 -124t127 -344q0 -221 -229 -450l-623 -600 q-18 -18 -44 -18z'/%3E%3C/svg%3E") no-repeat center / contain;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1536 1792 1792'%3E%3Cpath transform='scale(1,-1)' d='M896 -128q-26 0 -44 18l-624 602q-10 8 -27.5 26t-55.5 65.5t-68 97.5t-53.5 121t-23.5 138q0 220 127 344t351 124q62 0 126.5 -21.5t120 -58t95.5 -68.5t76 -68q36 36 76 68t95.5 68.5t120 58t126.5 21.5q224 0 351 -124t127 -344q0 -221 -229 -450l-623 -600 q-18 -18 -44 -18z'/%3E%3C/svg%3E") no-repeat center / contain;
    }
}


/* Player de audio do anuncio (2026-09-15): substitui o jPlayer/flat.audio.
   Markup em includes/vp-audio-player.php, comportamento em js/vp-audio.js.
   Mesmas cores e altura do player antigo, mas sem largura minima: encolhe
   ate caber na coluna do celular. */

.vp-audio {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 64px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #000;
    color: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
}

.vp-audio__btn {
    flex: none;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background: #00aef6;
    cursor: pointer;
}

.vp-audio__btn:hover {
    background: #0098d8;
}

.vp-audio__btn svg {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    fill: #fff;
}

.vp-audio__bar {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 64px;
    background: #232323;
    cursor: pointer;
}

.vp-audio__played {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #0082b2;
}

.vp-audio__text {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
}

.vp-audio__name {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.vp-audio__time {
    flex: none;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.vp-audio__btn:focus-visible,
.vp-audio__bar:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}


/* Cards da grade de anuncios (2026-09-16).
   O Semantic UI 2.4.2 define .ui.card { width: 290px }, largura fixa: a coluna
   (.postthumb-cnt) e percentual e acompanha a tela, mas o card parava em 290px
   e sobrava espaco — visivel na home, nas categorias, na busca e no perfil.
   Markup gerado por vp_render_post_by_id() no functions.php do tema pai. */

.postthumb-cnt > .ui.card {
    width: 100%;
}


/* Respiro e imagem dos cards (2026-09-16).
   O HTML traz style="width:100%;height:165px" embutido em cada imagem: com o
   card ocupando a coluna inteira, a foto esticava. object-fit preenche a faixa
   sem deformar. No celular o intervalo entre cards era de 10px (responsive.css,
   <=767px) e ficava apertado com os cards em largura cheia. */

.postthumb-cnt > .ui.card > .image img {
    object-fit: cover;
}

@media only screen and (max-width: 479px) {
    .col4thumbs .postthumb-cnt,
    .col3thumbs .postthumb-cnt {
        padding-bottom: 16px;
    }
}


/* Borda lateral e efeito dos cards da home (2026-09-16).
   A "borda" do .ui.card e a segunda sombra (0 0 0 1px), desenhada FORA da caixa.
   Na home a grade fica dentro de .new-homepage, que tem overflow: hidden, e o
   .col4thumbs puxa margem negativa (-10px no desktop, -5px ate 767px): a borda
   do card caia em 0 ou -5 em relacao ao conteiner e o anel era recortado. Nas
   outras telas isso nao acontece (categoria nao usa .new-homepage; no perfil ele
   e .no-style, com overflow: visible).
   Zerar a margem negativa aqui joga o card para dentro da area visivel. O
   padding-top da espaco para o translateY(-3px) do efeito "link" no hover da
   primeira linha, que seria cortado pelo mesmo overflow.
   Conteiner e content-box, entao padding nele estouraria a largura — por isso a
   correcao e na grade, nao no conteiner. */

.new-homepage .col4thumbs,
.new-homepage .col3thumbs {
    margin-left: 0;
    margin-right: 0;
    padding-top: 4px;
}


/* Card da busca (2026-09-16) — markup em includes/vp-card-busca.php.
   Substitui o card antigo do tema (~3.473 bytes/card, com SVG de medalha
   embutido). Fica dentro da coluna .postthumb-cnt existente, entao o
   responsivo do .col3thumbs continua valendo. */

.post_results .vpc {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e6e6e9;
    border-radius: 12px;
    transition: box-shadow 0.15s, transform 0.15s;
}

.post_results .vpc:hover {
    box-shadow: 0 6px 18px rgba(20, 20, 30, 0.1);
    transform: translateY(-2px);
}

.post_results .vpc__img {
    display: block;
    aspect-ratio: 300 / 207;
    background: #f1f1f3;
}

.post_results .vpc__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post_results .vpc__corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px 13px;
}

.post_results .vpc__vend {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.post_results .vpc__nome {
    overflow: hidden;
    color: #6b6b73;
    font-size: 12.5px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.post_results .vpc__nivel {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
}

.post_results .vpc__nivel--ouro   { background: #fbf0cd; color: #7a5c00; }
.post_results .vpc__nivel--prata  { background: #eeeef1; color: #63636b; }
.post_results .vpc__nivel--bronze { background: #f6e6d6; color: #7d4a17; }

.post_results .vpc__tit {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    min-height: 2.7em;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.post_results .vpc__tit a {
    color: #0e0e0f;
    text-decoration: none;
}

.post_results .vpc__sinais {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0e0e0f;
    font-size: 12px;
    font-weight: 600;
}

.post_results .vpc__sinal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.post_results .vpc__sinal--suave { color: #6b6b73; font-weight: 500; }

.post_results .vpc__sinal--novo {
    padding: 1px 8px;
    border-radius: 999px;
    background: #eaf6e2;
    color: #528425;
    font-size: 11px;
}

.post_results .vpc__sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #d9d9de;
}

.post_results .vpc__ico { flex: none; width: 13px; height: 13px; }
.post_results .vpc__ico--estrela { fill: #efb810; }

.post_results .vpc__ctx { color: #6b6b73; font-size: 11.5px; }
.post_results .vpc__ctx--alerta { color: #d94a3d; }

.post_results .vpc__pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #ededf0;
}

.post_results .vpc__prazo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #6b6b73;
    font-size: 11.5px;
}

.post_results .vpc__preco {
    color: #0e0e0f;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* O card da busca carrega tambem a classe post_thumb, porque js/my-script.js
   conta .post_results .post_thumb para paginar o "carregar mais". A classe traz
   estilo do tema antigo (style.css:2086 e responsive.css:451): altura fixa,
   borda, fundo e texto centralizado. Aqui isso e neutralizado — o visual do
   card vem das regras .vpc acima. */

.post_results .vpc.post_thumb {
    height: auto;
    width: auto;
    background: none;
    border: 1px solid #e6e6e9;
    text-align: left;
}