/**
 * Digitalease Wishlist Button Styles
 * Migrare din yith.css - adaptare pentru noul sistem
 *
 * @package Digitalease
 * @since 3.0.0
 */

/* ==========================================================================
   Base Button Styles
   ========================================================================== */

/* [CTX:WISHLIST_BTN:BASE] */
.digitalease-wishlist {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.digitalease-wishlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
    cursor: pointer;
    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base),
        opacity var(--transition-base),
        transform var(--transition-fast);
    color: var(--brand-color-primary, #590202);
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.digitalease-wishlist-btn:focus-visible {
    outline: var(--focus-ring, 2px solid var(--brand-color-primary));
    outline-offset: 2px;
}

/* Icon container */
/* [CTX:WISHLIST_BTN:ICON_STATES] */
.digitalease-wishlist-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 20px;
    height: 20px;
}

.digitalease-wishlist-btn__icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition:
        opacity var(--transition-base),
        transform var(--transition-fast);
}

/* Default state: empty heart visible */
.wishlist-icon--empty {
    opacity: 1;
}

.wishlist-icon--filled {
    opacity: 0;
}

/* Added state: filled heart visible */
.digitalease-wishlist-btn--added .wishlist-icon--empty {
    opacity: 0;
}

.digitalease-wishlist-btn--added .wishlist-icon--filled {
    opacity: 1;
}

/* Loading state */
/* [CTX:WISHLIST_BTN:LOADING] */
.digitalease-wishlist-btn--loading {
    pointer-events: none;
    opacity: 0.6;
}

.digitalease-wishlist-btn--loading .digitalease-wishlist-btn__icon {
    animation: wishlist-pulse 1s infinite;
}

@keyframes wishlist-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Label */
.digitalease-wishlist-btn__label {
    font-family: var(--brand-font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* ==========================================================================
   Context Variants - Product Cards (recommended-wishlist)
   ========================================================================== */

/* [CTX:WISHLIST_BTN:PRODUCT_CARD] */
.recommended-wishlist .digitalease-wishlist-btn {
    /* Icon only în carduri */
}

.recommended-wishlist .digitalease-wishlist-btn__label {
    display: none;
}

.recommended-wishlist .digitalease-wishlist-btn__icon {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   Context Variants - Single Product Page
   ========================================================================== */

/* Desktop inline (lângă Add to Cart) - same height as quantity and add to cart button */
/* [CTX:WISHLIST_BTN:SINGLE_INLINE] */
.single-product-wishlist-btn--inline .digitalease-wishlist-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--brand-color-surface);
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px var(--brand-color-primary);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* Tablet: Same inline wishlist button height for consistent layout */
@media (min-width: 768px) and (max-width: 991px) {
    .single-product-wishlist-btn--inline .digitalease-wishlist-btn {
        width: 48px;
        height: 48px;
    }

    .single-product-wishlist-btn--inline .digitalease-wishlist-btn__icon {
        width: 20px;
        height: 20px;
    }
}

.single-product-wishlist-btn--inline .digitalease-wishlist-btn:hover {
    background-color: var(--brand-color-surface-alt);
}

.single-product-wishlist-btn--inline .digitalease-wishlist-btn__label {
    display: none;
}

/* Mobile full-width */
/* [CTX:WISHLIST_BTN:SINGLE_MOBILE] */
.single-product-wishlist-btn--mobile-only .digitalease-wishlist-btn {
    width: 100%;
    padding: 10px var(--space-4, 16px);
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px var(--brand-color-primary, #590202);
    border-radius: var(--brand-radius-lg, 24px);
    justify-content: center;
    gap: var(--space-2, 8px);
}

.single-product-wishlist-btn--mobile-only .digitalease-wishlist-btn:hover {
    background: var(--brand-color-primary-50, #f9f5f5);
}

/* Responsive visibility - Desktop: > 1200px shows inline, hides mobile-only */
/* [CTX:WISHLIST_BTN:RESPONSIVE] */
@media (min-width: 1201px) {
    .single-product-wishlist-btn--mobile-only {
        display: none;
    }
}

/* Tablet range 768px - 1200px: mobile-style layout, hide inline, show mobile-only */
@media (min-width: 768px) and (max-width: 1200px) {
    .single-product-wishlist-btn--inline {
        display: none !important;
    }

    .single-product-wishlist-btn--mobile-only {
        display: flex;
        margin-top: var(--space-4);
        width: 100%;
    }

    .single-product-wishlist-btn--mobile-only .digitalease-wishlist-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Mobile: <= 767px - hide inline, show mobile-only */
@media (max-width: 767px) {
    .single-product-wishlist-btn--inline {
        display: none;
    }
}

/* ==========================================================================
   Hover Effects
   ========================================================================== */

.digitalease-wishlist-btn:hover .wishlist-icon--empty {
    transform: scale(1.1);
}

.digitalease-wishlist-btn--added:hover .wishlist-icon--filled {
    transform: scale(1.1);
}