/* ============================================================
   "Available now" badge
   - listing cards (Recently added, search results, featured)
   - profile header (inline)
   The theme already makes `.picture > a` cover the whole photo
   (position:absolute), so the badge is placed inside that link.
   Do NOT change the link's position, or the photo disappears.
   ============================================================ */

:root {
    --avn-green: #3ddc84;
    --avn-green-rgb: 61, 220, 132;
}

.avn-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    border: 1px solid rgba(var(--avn-green-rgb), .55);
    background: rgba(12, 14, 13, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 12px rgba(var(--avn-green-rgb), .12);
    color: #effff6;
    font-size: 11px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.avn-badge i {
    position: relative;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--avn-green);
    box-shadow: 0 0 6px rgba(var(--avn-green-rgb), .9);
}
.avn-badge i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--avn-green);
    animation: avn-ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}

/* on the card photo: top-right (top-left is used by "Featured") */
.picture .avn-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

/* next to the profile name */
.avn-badge-inline {
    position: static;
    vertical-align: middle;
    font-size: 12px;
    padding: 6px 13px 6px 10px;
    background: rgba(var(--avn-green-rgb), .12);
    color: var(--avn-green);
    box-shadow: none;
}

@media (max-width: 575px) {
    .picture .avn-badge {
        top: 8px;
        right: 8px;
        padding: 4px 9px 4px 7px;
        font-size: 10px;
        gap: 6px;
    }
}

@keyframes avn-ping {
    0%        { transform: scale(1);   opacity: .75; }
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .avn-badge i::after { animation: none; }
}