/**
 * WPC Smart Wishlist - Heart Icon for Remove Button
 * Replaces cross icon with filled heart icon in my-account wishlist table
 * Version: 1.0.0
 */

/* ============================================================
   MAIN HEART ICON STYLES
   ============================================================ */

/**
 * Target the remove button span and override the default cross icon
 * Default icon: \e918 (cross)
 * New icon: \f004 (filled heart)
 */
.woosw-items .woosw-item--remove span:before {
    /* Override default cross icon with filled heart icon */
    content: "\f004" !important;
    
    /* Heart color - red/pink */
    color: #FF8674 !important;
    
    /* Font size adjustment for better visibility */
    font-size: 18px !important;
    
    /* Remove any rotation that might be applied */
    transform: none !important;
    
    /* Ensure proper font family */
    font-family: "woosw" !important;
    
    /* Smooth transition for hover effect */
    transition: color 0.3s ease, transform 0.2s ease !important;
}

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

/**
 * Hover effect - make heart slightly darker
 */
.woosw-items .woosw-item--remove span:hover:before {
    color: #c0392b !important;
    
    /* Slight scale effect on hover */
    transform: scale(1.1) !important;
}

/**
 * Active/click effect - make heart even darker
 */
.woosw-items .woosw-item--remove span:active:before {
    color: #a93226 !important;
    
    /* Scale down slightly on click */
    transform: scale(0.95) !important;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

/**
 * Loading state - show spinner icon while removing
 */
.woosw-items .woosw-item--remove span.woosw-item--removing:before {
    /* Change to loading spinner icon */
    content: "\e913" !important;
    
    /* Spinner color */
    color: #999 !important;
    
    /* Apply spinner animation */
    animation: woosw-spinner 1s linear infinite !important;
    
    /* Remove transform during loading */
    transform: none !important;
}

/* ============================================================
   BUTTON CONTAINER STYLES
   ============================================================ */

/**
 * Make heart clickable area larger for better UX
 */
.woosw-items .woosw-item--remove {
    width: 20px !important;
    flex: 0 0 20px !important;
    
    /* Center alignment */
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * Style the span element itself
 */
.woosw-items .woosw-item--remove span {
    display: inline-block;
    width: 20px;
    text-align: center;
    cursor: pointer;
    
    /* Smooth transition for all properties */
    transition: all 0.3s ease !important;
}

/* ============================================================
   CUSTOM CLASS (Added via JavaScript)
   ============================================================ */

/**
 * Additional styles when custom class is added
 */
.woosw-items .woosw-item--remove.woosw-heart-remove span:before {
    /* Ensure heart icon is always applied */
    content: "\f004" !important;
}

/* ============================================================
   TABLE LAYOUT SPECIFIC STYLES
   ============================================================ */

/**
 * My-account page table layout
 */
.woocommerce-account table.woosw-items .woosw-item--remove span:before {
    /* Slightly larger heart in table view */
    font-size: 20px !important;
}

/**
 * Popup layout
 */
.woosw-popup .woosw-items .woosw-item--remove span:before {
    /* Standard size for popup */
    font-size: 16px !important;
}

/* ============================================================
   OPTIONAL: CUSTOMIZATION OVERRIDES
   ============================================================ */

/**
 * Uncomment below to use OUTLINE heart instead of filled
 */
/*
.woosw-items .woosw-item--remove span:before {
    content: "\f08a" !important;
}
*/

/**
 * Uncomment below to change heart color to blue
 */
/*
.woosw-items .woosw-item--remove span:before {
    color: #3498db !important;
}
*/

/**
 * Uncomment below to change heart color to purple
 */
/*
.woosw-items .woosw-item--remove span:before {
    color: #9b59b6 !important;
}
*/

/**
 * Uncomment below to add a glow effect on hover
 */
/*
.woosw-items .woosw-item--remove span:hover:before {
    text-shadow: 0 0 10px rgba(231, 76, 60, 0.5) !important;
}
*/

/* ============================================================
   RESPONSIVE STYLES
   ============================================================ */

/**
 * Mobile devices - slightly smaller heart
 */
@media (max-width: 768px) {
    .woosw-items .woosw-item--remove span:before {
        font-size: 16px !important;
    }
    
    .woosw-items .woosw-item--remove {
        width: 18px !important;
        flex: 0 0 18px !important;
    }
}

/**
 * Small mobile devices - even smaller heart
 */
@media (max-width: 480px) {
    .woosw-items .woosw-item--remove span:before {
        font-size: 14px !important;
    }
    
    .woosw-items .woosw-item--remove {
        width: 16px !important;
        flex: 0 0 16px !important;
    }
}