/**
 * Unified Wishlist Styles
 * Consistent wishlist button styling across all pages
 * Gray outline hearts for inactive, red filled hearts for active
 */

/* Base wishlist button styling */
.product-wishlist,
.wishlist-btn,
[data-wishlist-btn] {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: transparent !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 3 !important;
    padding: 0 !important;
    outline: none !important;
}

/* Wishlist icon styling */
.product-wishlist i,
.wishlist-btn i,
[data-wishlist-btn] i {
    font-size: 18px !important;
    transition: color 0.3s ease !important;
    pointer-events: none !important;
}

/* Default state: gray outline hearts */
.product-wishlist i.far,
.wishlist-btn i.far,
[data-wishlist-btn] i.far,
.product-wishlist:not(.active) i,
.wishlist-btn:not(.active) i,
[data-wishlist-btn]:not(.active) i {
    color: #999 !important;
}

/* Active state: red filled hearts */
.product-wishlist i.fas,
.wishlist-btn i.fas,
[data-wishlist-btn] i.fas,
.product-wishlist.active i,
.wishlist-btn.active i,
[data-wishlist-btn].active i {
    color: #FF0000 !important;
}

/* Hover states - no background change, keep transparent */
.product-wishlist:hover,
.wishlist-btn:hover,
[data-wishlist-btn]:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Hover for inactive buttons - keep gray */
.product-wishlist:not(.active):hover i,
.wishlist-btn:not(.active):hover i,
[data-wishlist-btn]:not(.active):hover i {
    color: #999 !important;
}

/* Hover for active buttons - keep red */
.product-wishlist.active:hover i,
.wishlist-btn.active:hover i,
[data-wishlist-btn].active:hover i {
    color: #FF0000 !important;
}

/* Focus states */
.product-wishlist:focus,
.wishlist-btn:focus,
[data-wishlist-btn]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Wishlist count badge styling */
.wishlist-count,
.wishlist-badge,
#wishlist-count,
#mobile-wishlist-count,
[data-wishlist-count],
.header-wishlist .badge,
.wishlist-icon .badge {
    background: #FF0000 !important;
    color: white !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    z-index: 10 !important;
}

/* Hide count when empty */
.wishlist-count:empty,
.wishlist-badge:empty,
#wishlist-count:empty,
#mobile-wishlist-count:empty,
[data-wishlist-count]:empty {
    display: none !important;
}

/* Specific overrides for different page contexts */

/* Products page specific */
.products-grid .product-wishlist,
.products-container .product-wishlist {
    top: 12px !important;
    right: 12px !important;
}

/* Carousel specific - handled by unified-carousel.module.css */

/* Cart page specific */
.cart-container .wishlist-btn,
.cart-item .wishlist-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}

/* Wishlist page specific */
.wishlist-container .wishlist-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
}

/* Product detail page specific */
.product-detail .wishlist-btn,
.product-info .wishlist-btn {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 16px !important;
    background: transparent !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .product-wishlist,
    .wishlist-btn,
    [data-wishlist-btn] {
        width: 32px !important;
        height: 32px !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    .product-wishlist i,
    .wishlist-btn i,
    [data-wishlist-btn] i {
        font-size: 16px !important;
    }
    
    .wishlist-count,
    .wishlist-badge,
    #wishlist-count,
    #mobile-wishlist-count,
    [data-wishlist-count] {
        min-width: 16px !important;
        height: 16px !important;
        font-size: 11px !important;
        top: -6px !important;
        right: -6px !important;
    }
}

/* High specificity overrides to ensure consistency */
html body .product-wishlist,
html body .wishlist-btn,
html body [data-wishlist-btn] {
    background: transparent !important;
    border: none !important;
}

html body .product-wishlist i.far,
html body .wishlist-btn i.far,
html body [data-wishlist-btn] i.far {
    color: #999 !important;
}

html body .product-wishlist i.fas,
html body .wishlist-btn i.fas,
html body [data-wishlist-btn] i.fas {
    color: #FF0000 !important;
}

html body .product-wishlist.active i,
html body .wishlist-btn.active i,
html body [data-wishlist-btn].active i {
    color: #FF0000 !important;
}

/* Animation for smooth transitions */
@keyframes wishlistToggle {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.product-wishlist.toggling i,
.wishlist-btn.toggling i,
[data-wishlist-btn].toggling i {
    animation: wishlistToggle 0.3s ease-in-out;
}

/* Ensure icons are properly loaded */
.product-wishlist i::before,
.wishlist-btn i::before,
[data-wishlist-btn] i::before {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 400 !important;
}

.product-wishlist i.fas::before,
.wishlist-btn i.fas::before,
[data-wishlist-btn] i.fas::before {
    font-weight: 900 !important;
}

/* Loading state */
.product-wishlist.loading,
.wishlist-btn.loading,
[data-wishlist-btn].loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Error state */
.product-wishlist.error,
.wishlist-btn.error,
[data-wishlist-btn].error {
    opacity: 0.5 !important;
}

.product-wishlist.error i,
.wishlist-btn.error i,
[data-wishlist-btn].error i {
    color: #ff6b6b !important;
}