/* Container */
.gk-wish-wrapper {
    display: inline-block;
    --gk-tooltip-bg: #333; /* Default tooltip bg */
}

/* Button Base Style */
.gk-wish-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* Default, overridden by Elementor */
    border: 1px solid #e5e7eb; /* Default */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
    text-decoration: none; /* For <a> tag */
    position: relative;
    line-height: 1;
}

/* Icons Logic */
.gk-wish-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* حالت پیش‌فرض: آیکن نرمال دیده شود، اکتیو مخفی */
.gk-wish-icon--active {
    display: none;
}

/* حالت فعال (is-active): آیکن نرمال مخفی، اکتیو دیده شود */
.gk-wish-btn.is-active .gk-wish-icon--normal {
    display: none;
}
.gk-wish-btn.is-active .gk-wish-icon--active {
    display: flex;
    animation: gkHeartBeat 0.4s;
}

/* انیمیشن تپش قلب موقع کلیک */
@keyframes gkHeartBeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Loading State (Optional - if your JS adds a loading class) */
.gk-wish-btn.is-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Tooltip */
.gk-tooltip { position: relative; }
.gk-tooltip[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: var(--gk-tooltip-bg);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    z-index: 100;
    pointer-events: none;
}
.gk-tooltip[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-3px);
    border: 5px solid transparent;
    border-top-color: var(--gk-tooltip-bg);
    z-index: 100;
    pointer-events: none;
}
