/* BASE */
.wsp-watching,
.wsp-sold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    margin: 10px 0;
    color: #333;
}

/* WATCHING (Grey pill background) */
.wsp-watching {
    background: #f2f2f2;
    padding: 10px 14px;
    border-radius: 6px;
}

/* SOLD (No background) */
.wsp-sold {
    padding: 0;
}

/* ICON BASE */
.wsp-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
}

/* EYE ICON – OUTLINED (LIKE SCREENSHOT) */
.wsp-icon.eye {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 12S5.5 5 12 5s10.5 7 10.5 7-4 7-10.5 7S1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* FIRE ICON – OUTLINED (LIKE SCREENSHOT) */
.wsp-icon.fire {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s3 4 3 7a3 3 0 1 1-6 0c0-3 3-7 3-7z'/%3E%3Cpath d='M5 14a7 7 0 0 0 14 0c0-2.5-1.5-4.5-3-6'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

/* ENTRY ANIMATION */
.wsp-watching {
    animation: wspFadeSlide 0.45s ease-out both, wspPulse 3s ease-in-out infinite;
}

/* HOVER EFFECT (DESKTOP ONLY) */
@media (hover: hover) {
    .wsp-watching:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        transition: box-shadow 0.2s ease;
    }
}

/* KEYFRAMES */
@keyframes wspFadeSlide {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wspPulse {
    0% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(0,0,0,0.03);
    }
    100% {
        box-shadow: 0 0 0 rgba(0,0,0,0);
    }
}

/* SHOPIFY-LIKE ATTENTION FLASH */
.wsp-watching {
    position: relative;
    animation: wspFlash 1.2s ease-out both;
}

/* ICON PULSE */
.wsp-watching .wsp-icon.eye {
    animation: wspIconPulse 1.5s ease-in-out infinite;
}

/* FLASH KEYFRAMES */
@keyframes wspFlash {
    0% {
        background-color: #e9e9e9;
        transform: scale(0.98);
    }
    25% {
        background-color: #ffffff;
        transform: scale(1);
    }
    50% {
        background-color: #e9e9e9;
    }
    100% {
        background-color: #f2f2f2;
    }
}

/* ICON PULSE KEYFRAMES */
@keyframes wspIconPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}