/* =========================================================
   BUTTON
========================================================= */
.wishlist-btn {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 12px;

    background: #ffffff;
    border: 1px solid #e2e8f0;

    cursor: pointer;

    transition: all 0.25s ease;
}

/* Hover */
.wishlist-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* =========================================================
   HEART IMAGES
========================================================= */
.wishlist-btn img {
    width: 22px;
    height: 22px;

    position: absolute;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

/* Default heart */
.heart-outline {
    opacity: 1;
}

/* Filled heart hidden initially */
.heart-fill {
    opacity: 0;
}

/* Hover animation */
.wishlist-btn:hover img {
    transform: scale(1.12);
}

/* =========================================================
   ACTIVE STATE
========================================================= */
.wishlist-btn.active {
    background: #fff1f2;
    border-color: #fb7185;
}

/* Show filled heart */
.wishlist-btn.active .heart-outline {
    opacity: 0;
}

.wishlist-btn.active .heart-fill {
    opacity: 1;
}

/* =========================================================
   TOOLTIP
========================================================= */
.wishlist-btn .tag-action {
    opacity: 0;

    position: absolute;

    bottom: calc(100% + 10px);
    left: 50%;

    transform: translateX(-50%) translateY(5px);

    background: #111827;
    color: #ffffff;

    padding: 6px 10px;

    border-radius: 6px;

    font-size: 12px;

    white-space: nowrap;

    pointer-events: none;

    transition: all 0.2s ease;
}

.wishlist-btn:hover .tag-action {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}