/* ============================================================
   HP Listing Stats – Badges vues & favoris
   ============================================================ */

/* ── Conteneur commun ── */
.hpstats-badges {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
}

/* ── Badge individuel ── */
.hpstats-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 3px 10px 3px 7px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

/* ── Icône SVG ── */
.hpstats-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

/* ── Badge vues ── */
.hpstats-badge.hpstats-views {
    color: #4a90d9;
}
.hpstats-badge.hpstats-views .hpstats-icon {
    stroke: #4a90d9;
}

/* ── Badge favoris ── */
.hpstats-badge.hpstats-favs {
    color: #e05a6d;
}
.hpstats-badge.hpstats-favs .hpstats-icon {
    fill: #e05a6d;
}

/* ── Animation quand le compteur change ── */
@keyframes hpstats-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
.hpstats-count.hpstats-updated {
    animation: hpstats-pop 0.4s ease;
}

/* ============================================================
   Contexte CARD (dans la liste des annonces)
   ============================================================ */
.hpstats-card {
    margin: 6px 8px 8px;
}

/* Adapter selon ListingHive : les cards ont souvent une footer zone */
.hp-listing--view-block .hpstats-badges,
[class*="listing-block"] .hpstats-badges {
    margin-top: 6px;
}

/* ============================================================
   Contexte SINGLE (page de détail)
   ============================================================ */
.hpstats-single {
    margin: 8px 0 14px;
}

/* Position sous le titre sur la page annonce */
.hp-listing--view-page .hpstats-badges {
    margin-bottom: 16px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 480px) {
    .hpstats-badge {
        font-size: 12px;
        padding: 2px 8px 2px 6px;
    }
    .hpstats-icon {
        width: 12px;
        height: 12px;
    }
}

/* ── Best-in-page highlights ── */

/* Vues : la plus haute → vert */
.hpstats-views-count.hpstats-best-views {
    color: #22a06b;
    font-weight: 700;
}
.hpstats-badge.hpstats-views:has(.hpstats-best-views) {
    background: rgba(34, 160, 107, 0.12);
    color: #22a06b;
}
.hpstats-badge.hpstats-views:has(.hpstats-best-views) .hpstats-icon {
    stroke: #22a06b;
}

/* Favoris : le plus haut → rouge */
.hpstats-favs-count.hpstats-best-favs {
    color: #e03e52;
    font-weight: 700;
}
.hpstats-badge.hpstats-favs:has(.hpstats-best-favs) {
    background: rgba(224, 62, 82, 0.12);
    color: #e03e52;
}
.hpstats-badge.hpstats-favs:has(.hpstats-best-favs) .hpstats-icon {
    fill: #e03e52;
}