/* Super Visible Badge Styling for Cart & Wishlist */

/* Override default badge styling */
#cart-count, #wishlist-count {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    font-size: 12px !important;
    min-width: 24px !important;
    height: 24px !important;
    padding: 4px 7px !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: 3px solid white !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    color: white !important;
    z-index: 1000 !important;
    animation: badgePulse 2s ease-in-out infinite !important;
}

/* Different color for wishlist */
#wishlist-count {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.6) !important;
}

/* Pulse animation for attention */
@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
    }
    50% {
        box-shadow: 0 4px 20px rgba(239, 68, 68, 0.9);
        transform: scale(1.05);
    }
}

/* Badge update animation */
.badge-update {
    animation: badgeBounce 0.6s ease !important;
}

@keyframes badgeBounce {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Large badge for 10+ items */
.badge-large {
    min-width: 28px !important;
    font-size: 11px !important;
    padding: 4px 6px !important;
}

/* Badge hover effect */
.btn-link:hover #cart-count,
.btn-link:hover #wishlist-count {
    transform: scale(1.2) !important;
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.8) !important;
}

/* Make badge more visible on mobile */
@media (max-width: 768px) {
    #cart-count, #wishlist-count {
        top: -8px !important;
        right: -8px !important;
        font-size: 11px !important;
        min-width: 22px !important;
        height: 22px !important;
    }
}

/* Icon container positioning fix */
.btn-link.position-relative {
    position: relative !important;
}

/* Ensure badge is always on top */
.badge {
    pointer-events: none; /* Don't block icon clicks */
}