/**
 * CART BADGE ANIMATIONS
 * ======================
 * Advanced animations for cart count badges
 */

/* ============================================
   CART BADGE BASE STYLES
   ============================================ */

#cart-count,
.cart-count,
.cart-badge {
    /* Always use flexbox for centering */
    display: flex !important;
    align-items: center;
    justify-content: center;

    /* Default visible state */
    opacity: 1;
    visibility: visible;

    /* Smooth transitions */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.3s ease;
}

/* ============================================
   EMPTY STATE (0 items)
   ============================================ */

#cart-count.empty,
#cart-count.hidden,
.cart-count.empty,
.cart-count.hidden,
.cart-badge.empty,
.cart-badge.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.5);
    pointer-events: none;
}

/* ============================================
   HAS ITEMS STATE
   ============================================ */

#cart-count.has-items,
.cart-count.has-items,
.cart-badge.has-items {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1);
    pointer-events: auto;
}

/* ============================================
   BOUNCE ANIMATION (when items added)
   ============================================ */

@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);
    }
}

#cart-count.bounce,
.cart-count.bounce,
.cart-badge.bounce {
    animation: badgeBounce 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   PULSE ANIMATION (optional attention grabber)
   ============================================ */

@keyframes badgePulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(147, 51, 234, 0.4);
    }

    50% {
        box-shadow: 0 4px 16px rgba(147, 51, 234, 0.6);
    }
}

#cart-count.pulse,
.cart-count.pulse,
.cart-badge.pulse {
    animation: badgePulse 2s ease-in-out infinite;
}

/* ============================================
   NAVBAR CART COUNT - DESKTOP SPECIFIC
   ============================================ */

.nav-cart #cart-count {
    /* Ensure it's always positioned correctly */
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;

    /* Size - Override styles.css */
    min-width: 20px !important;
    width: auto !important;
    height: 20px !important;
    padding: 0 6px !important;

    /* Style */
    /* Style - SUPERCHARGED NOTIFICATION STYLE */
    background: #FF3B30 !important;
    /* iOS-style Notification Red */
    color: white !important;
    font-size: 13px !important;
    /* Bigger number */
    font-weight: 800 !important;
    border-radius: 50% !important;
    /* Perfect circle */
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important;

    /* Centering */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Text rendering */
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    letter-spacing: -0.5px !important;

    /* Transitions */
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;

    /* Z-index to ensure visibility */
    z-index: 100 !important;
}

/* Make it pop when hovering */
.nav-cart:hover #cart-count {
    transform: scale(1.1) translateY(-2px);
    background: #ff453a !important;
}

/* Also target by ID to increase specificity */
#cart-count {
    /* Override any conflicting styles */
    width: auto !important;
    min-width: 20px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}

/* Desktop hover effect */
.nav-cart:hover #cart-count {
    background: linear-gradient(135deg, #a855f7, #c084fc);
}

/* ============================================
   MOBILE SPECIFIC (if needed)
   ============================================ */

@media (max-width: 768px) {
    .nav-cart #cart-count {
        /* Mobile badge might be hidden based on navbar design */
        /* Check navbar-2row.css for mobile rules */
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

body.dark-mode .nav-cart #cart-count {
    border-color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.5);
}

body.dark-mode .nav-cart:hover #cart-count {
    background: linear-gradient(135deg, #a855f7, #c084fc);
}