/**
 * Elemento do Elementor que receberá o contador.
 * Adicione a classe abaixo em Avançado > Classes CSS:
 *
 * wc-cart-count-icon
 *
 * Classes opcionais:
 * - wc-cart-count-white-badge => versão inversa (bolinha branca + número preto)
 */
.wc-cart-count-icon {
    --wcec-badge-size: 18px;
    --wcec-badge-bg: #000000;
    --wcec-badge-color: #ffffff;
    --wcec-badge-font-size: 10px;
    --wcec-badge-font-weight: 700;
    --wcec-badge-top: -7px;
    --wcec-badge-right: -9px;
    --wcec-badge-padding-x: 5px;

    /* Hover da versão padrão: inverte as cores */
    --wcec-badge-hover-bg: #ffffff;
    --wcec-badge-hover-color: #000000;

    position: relative !important;
}

/*
 * Versão inversa:
 * bolinha branca + número preto.
 * O hover acompanha o cabeçalho com ícones claros.
 */
.wc-cart-count-icon.wc-cart-count-white-badge {
    --wcec-badge-bg: #ffffff;
    --wcec-badge-color: #000000;
    --wcec-badge-hover-bg: #FFFFFF9E;
    --wcec-badge-hover-color: #000000;
}

.wc-cart-count-icon .wc-cart-count-badge {
    position: absolute;
    z-index: 20;
    top: var(--wcec-badge-top);
    right: var(--wcec-badge-right);

    /*
     * O badge nasce oculto para evitar o flash de uma bolinha vazia enquanto
     * a quantidade real do carrinho ainda está sendo consultada via AJAX.
     */
    display: none;
    align-items: center;
    justify-content: center;

    min-width: var(--wcec-badge-size);
    height: var(--wcec-badge-size);
    padding: 0 var(--wcec-badge-padding-x);
    box-sizing: border-box;

    border-radius: 999px;
    background: var(--wcec-badge-bg);
    color: var(--wcec-badge-color);

    font-size: var(--wcec-badge-font-size);
    font-weight: var(--wcec-badge-font-weight);
    line-height: 1;
    text-align: center;

    pointer-events: none;
    user-select: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/*
 * Só exibe o badge depois que a quantidade foi confirmada e é maior que zero.
 * Com carrinho vazio ele nunca chega a aparecer, nem durante o carregamento.
 */
.wc-cart-count-icon .wc-cart-count-badge.is-visible {
    display: inline-flex;
}

/*
 * O badge acompanha SOMENTE o hover real do ícone do Elementor.
 *
 * Importante:
 * - Não usamos :hover no widget inteiro, pois a área externa do widget pode
 *   começar antes do desenho do ícone e faria o badge mudar de cor cedo demais.
 * - Não usamos :focus-within, pois cliques (inclusive clique do scroll para
 *   abrir em nova aba) podem manter o foco e deixar o badge preso no hover.
 */
.wc-cart-count-icon:has(.elementor-icon:hover) .wc-cart-count-badge {
    background: var(--wcec-badge-hover-bg);
    color: var(--wcec-badge-hover-color);
}

/*
 * Compatibilidade com a classe usada em versões anteriores.
 * A partir da v1.1.3, zero já fica oculto por padrão.
 */
.wc-cart-count-icon.wc-cart-count-hide-zero .wc-cart-count-badge.is-empty,
.wc-cart-count-icon .wc-cart-count-badge.is-empty,
.wc-cart-count-icon .wc-cart-count-badge.is-pending {
    display: none;
}