/**
 * Prime Store - Wishlist Button Component
 * Toggle button for adding/removing products from wishlist
 *
 * @package PrimeStore
 * @version 2.0.0
 */

/* ===================================================================
   WISHLIST BUTTON - Base Styles
   =================================================================== */
button.prime-wishlist-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--radius-md, 8px);
    background-color: #f0f0f1;
    cursor: pointer;
    transition: all var(--transition-slow, 300ms ease);
    overflow: hidden;
}

button.prime-wishlist-toggle .wishlist-icon-wrapper svg,
button.prime-wishlist-toggle .wishlist-icon-wrapper img,
button.prime-wishlist-toggle .wishlist-icon-wrapper .wishlist-icon-img {
    display: block;
    margin: 0 auto;
    padding: 0;
    line-height: 0;
}

/* ===================================================================
   ICON STATES - Normal (Not in wishlist)
   =================================================================== */
button.prime-wishlist-toggle:not(.in-wishlist) .wishlist-icon-normal svg {
    color: #000000;
    transition: color var(--transition-slow, 300ms ease);
}

button.prime-wishlist-toggle:not(.in-wishlist):hover .wishlist-icon-normal svg {
    color: #000000;
}

/* ===================================================================
   ICON STATES - Added (In wishlist)
   =================================================================== */
button.prime-wishlist-toggle.in-wishlist .wishlist-icon-added svg {
    color: #000000;
    transition: color var(--transition-slow, 300ms ease);
}

button.prime-wishlist-toggle.in-wishlist:hover .wishlist-icon-added svg {
    color: #000000;
}

/* ===================================================================
   VISIBILITY STATES - Default
   =================================================================== */
button.prime-wishlist-toggle:not(.in-wishlist):not(.loading)
    .wishlist-icon-normal {
    display: flex;
    opacity: 1;
    visibility: visible;
}

button.prime-wishlist-toggle:not(.in-wishlist):not(.loading)
    .wishlist-icon-added,
button.prime-wishlist-toggle:not(.in-wishlist):not(.loading) .wishlist-loader {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* ===================================================================
   VISIBILITY STATES - In Wishlist
   =================================================================== */
button.prime-wishlist-toggle.in-wishlist:not(.loading) .wishlist-icon-added {
    display: flex;
    opacity: 1;
    visibility: visible;
}

button.prime-wishlist-toggle.in-wishlist:not(.loading) .wishlist-icon-normal,
button.prime-wishlist-toggle.in-wishlist:not(.loading) .wishlist-loader {
    display: none;
    opacity: 0;
    visibility: hidden;
}

/* ===================================================================
   LOADING STATE
   =================================================================== */
button.prime-wishlist-toggle.loading .wishlist-loader {
    display: flex;
    opacity: 1;
    visibility: visible;
}

button.prime-wishlist-toggle.loading .wishlist-icon-normal,
button.prime-wishlist-toggle.loading .wishlist-icon-added {
    display: none;
    opacity: 0;
    visibility: hidden;
}

button.prime-wishlist-toggle.loading {
    pointer-events: none;
    cursor: wait;
}

/* ===================================================================
   LOADER ANIMATION
   =================================================================== */
button.prime-wishlist-toggle .wishlist-loader svg {
    width: 20px;
    height: 20px;
    display: block;
}

@keyframes prime-wishlist-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

button.prime-wishlist-toggle .wishlist-loader svg circle {
    animation: prime-wishlist-rotate 0.8s linear infinite;
    transform-origin: center;
}

/* ===================================================================
   ADMIN PREVIEW
   =================================================================== */
.wishlist-button-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    background: var(--color-bg-secondary, #f9fafb);
    border-radius: var(--radius-md, 8px);
    margin-top: 10px;
}

.wishlist-button-preview .prime-wishlist-toggle {
    pointer-events: none;
}

/* ===================================================================
   EMPTY WISHLIST ICON
   =================================================================== */
.wishlist-empty-icon {
    display: block;
    margin: 0 auto var(--spacing-md, 12px);
}