/**
 * WooCommerce Cart Count Badge
 * Red notification badge showing number of items in cart
 */

/* Cart Menu Item with Badge */
.menu-item-cart {
    position: relative !important;
}

/* Cart Count Badge - Square with rounded corners */
.cart-count-badge {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    background: #e74c3c !important; /* Red background */
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: bold !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
    border-radius: 4px !important; /* Rounded corners instead of circle */
    width: 20px !important; /* Fixed width for square */
    height: 20px !important; /* Fixed height for square */
    line-height: 20px !important; /* Perfect vertical centering */
    text-align: center !important; /* Perfect horizontal centering */
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1000 !important;
    display: flex !important; /* Use flexbox for perfect centering */
    align-items: center !important; /* Vertical centering */
    justify-content: center !important; /* Horizontal centering */
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
    transition: all 0.2s ease !important;
    letter-spacing: -0.5px !important; /* Tighter spacing for 2 digits */
}

/* Hide badge when cart is empty - but show in mobile menu for alignment testing */
.cart-count-badge.empty {
    display: none !important;
}

/* Show empty badge in mobile menu for positioning (temporary for debugging) */
.ast-mobile-popup-content .cart-count-badge.empty,
.ast-mobile-header-wrap .cart-count-badge.empty,
.ast-mobile-popup-drawer .cart-count-badge.empty {
    display: flex !important; /* Show empty badges in mobile menu for testing */
}

/* Badge hover effect */
.menu-item-cart:hover .cart-count-badge {
    background: #c0392b !important; /* Darker red on hover */
    transform: scale(1.1) !important;
}

/* Hover effect for mobile menu badges (preserve vertical centering) */
.ast-mobile-popup-content .menu-item-cart:hover .cart-count-badge,
.ast-mobile-header-wrap .menu-item-cart:hover .cart-count-badge,
.ast-mobile-popup-drawer .menu-item-cart:hover .cart-count-badge {
    transform: translateY(-50%) scale(1.1) !important; /* Combine centering and scaling */
    background: #c0392b !important; /* Darker red on hover */
}

/* Different positioning for different menu layouts */

/* Primary menu in header */
.main-header-menu .menu-item-cart {
    position: relative !important;
}

.main-header-menu .cart-count-badge {
    top: -8px !important;
    right: -8px !important;
}

/* Mobile menu - Fixed alignment with Cart text */
/* Higher specificity selectors to override theme styles */
.ast-mobile-popup-content .menu-item-cart,
.ast-mobile-header-wrap .menu-item-cart {
    position: relative !important; /* Ensure proper positioning context */
}

.ast-mobile-popup-content .menu-item-cart a,
.ast-mobile-header-wrap .menu-item-cart a {
    position: relative !important; /* Position badge relative to the cart link */
    display: inline-block !important;
}

/* More specific selectors for mobile menu cart badge */
.ast-mobile-popup-content .menu-item-cart .cart-count-badge,
.ast-mobile-header-wrap .menu-item-cart .cart-count-badge,
.ast-mobile-popup-drawer .menu-item-cart .cart-count-badge {
    top: 50% !important;
    right: -30px !important; /* Position to the right of the Cart text */
    position: absolute !important;
    transform: translateY(-50%) !important; /* Vertically center with Cart label */
    z-index: 999 !important; /* Ensure it appears above other elements */
    display: flex !important; /* Show even when empty for debugging */
}

/* Astra header builder compatibility */
.ast-header-woo-cart .cart-count-badge {
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
}

/* For text-based cart menu items */
.menu-item-cart a {
    position: relative !important;
    display: inline-block !important;
}

/* Responsive adjustments - maintain square proportions */
@media screen and (max-width: 768px) {
    .cart-count-badge {
        width: 18px !important;
        height: 18px !important;
        line-height: 18px !important;
        font-size: 10px !important;
        top: -7px !important;
        right: -7px !important;
        border-radius: 3px !important;
    }
}

@media screen and (max-width: 480px) {
    .cart-count-badge {
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        font-size: 9px !important;
        top: -6px !important;
        right: -6px !important;
        border-radius: 3px !important;
        letter-spacing: -0.3px !important;
    }
}

/* Animation for count changes */
@keyframes cart-badge-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes cart-badge-pulse-mobile {
    0% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.2); }
    100% { transform: translateY(-50%) scale(1); }
}

.cart-count-badge.updated {
    animation: cart-badge-pulse 0.3s ease-in-out !important;
}

/* Mobile menu animation (preserve vertical centering) */
.ast-mobile-popup-content .cart-count-badge.updated {
    animation: cart-badge-pulse-mobile 0.3s ease-in-out !important;
}

/* Ensure proper stacking order */
.menu-item-cart .cart-count-badge {
    z-index: 9999 !important;
}

/* White header compatibility */
body.ast-theme-transparent-header .cart-count-badge {
    border-color: rgba(255, 255, 255, 0.8) !important;
}

/* Dark background compatibility */
.site-header[style*="background-color: var(--ast-global-color-4)"] .cart-count-badge,
.site-header[style*="background: var(--ast-global-color-4)"] .cart-count-badge {
    border-color: rgba(255, 255, 255, 0.9) !important;
}