/* ChaabiHub AI — Heart-only reactions
   Loads on every page that has Sngine's reaction widget.
   Overrides the multi-reaction UI to show only a heart-love button.
   When the user has not reacted: outlined gray heart.
   When the user has reacted (any reaction type): solid red heart.
*/

/* 1. Hide the entire multi-reaction popover (the strip of haha/wow/sad/etc) */
.reactions-popup,
.reactions-list,
.post-reactions-popup,
.feel-reactions,
.feel-options,
.reactions-bar,
.reactions-tooltip,
.reactions-options,
.reactions-container,
.reactions-wrapper .reactions-container,
[data-reactions-popup],
.x-popover-reactions {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Force the "like" button to look like a heart (outlined when inactive) */
.btn-react,
.like-btn,
.feel-like,
.post-like,
.reaction-btn,
.j-reaction-button,
[data-reaction-action],
.reactions-trigger,
.likebtn,
a[data-handle="post-like"],
a[data-handle="reaction"] {
    color: #4b5563 !important;          /* gray for inactive */
    transition: color 120ms ease, transform 80ms ease !important;
}

/* 3. Replace the inner icon for the like button: hide existing emoji/img,
   inject a heart via ::before. We do this on multiple potential selectors
   because Sngine themes vary. The original icons (`<i class="fa fa-thumbs-up">`,
   `<img class="reaction-icon">` etc.) get hidden; the ::before pseudo-element
   draws the heart. */
.btn-react i, .btn-react img,
.like-btn i, .like-btn img,
.feel-like i, .feel-like img,
.post-like i, .post-like img,
.reaction-btn i, .reaction-btn img,
.j-reaction-button i, .j-reaction-button img,
[data-reaction-action] i, [data-reaction-action] img,
.reactions-trigger i, .reactions-trigger img,
.likebtn i, .likebtn img,
a[data-handle="post-like"] i, a[data-handle="post-like"] img,
a[data-handle="reaction"] i, a[data-handle="reaction"] img {
    display: none !important;
}

.btn-react::before,
.like-btn::before,
.feel-like::before,
.post-like::before,
.reaction-btn::before,
.j-reaction-button::before,
[data-reaction-action]::before,
.reactions-trigger::before,
.likebtn::before,
a[data-handle="post-like"]::before,
a[data-handle="reaction"]::before {
    content: "♡";
    font-size: 18px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Country Flags",sans-serif;
}

/* 4. Active state — applied either via Sngine's own .active / .reacted classes
   OR via our own .ch-heart-active class set by heart_reactions.js. */
.btn-react.active,        .btn-react.reacted,        .btn-react.ch-heart-active,
.like-btn.active,         .like-btn.reacted,         .like-btn.ch-heart-active,
.feel-like.active,        .feel-like.reacted,        .feel-like.ch-heart-active,
.post-like.active,        .post-like.reacted,        .post-like.ch-heart-active,
.reaction-btn.active,     .reaction-btn.reacted,     .reaction-btn.ch-heart-active,
.j-reaction-button.active,.j-reaction-button.reacted,.j-reaction-button.ch-heart-active,
[data-reaction-action].active, [data-reaction-action].reacted, [data-reaction-action].ch-heart-active,
.reactions-trigger.active, .reactions-trigger.reacted, .reactions-trigger.ch-heart-active,
.likebtn.active,           .likebtn.reacted,           .likebtn.ch-heart-active,
a[data-handle="post-like"].active, a[data-handle="post-like"].reacted, a[data-handle="post-like"].ch-heart-active,
a[data-handle="reaction"].active,  a[data-handle="reaction"].reacted,  a[data-handle="reaction"].ch-heart-active {
    color: #ff3b5c !important;        /* red love */
    font-weight: 600 !important;
}

.btn-react.active::before,        .btn-react.reacted::before,        .btn-react.ch-heart-active::before,
.like-btn.active::before,         .like-btn.reacted::before,         .like-btn.ch-heart-active::before,
.feel-like.active::before,        .feel-like.reacted::before,        .feel-like.ch-heart-active::before,
.post-like.active::before,        .post-like.reacted::before,        .post-like.ch-heart-active::before,
.reaction-btn.active::before,     .reaction-btn.reacted::before,     .reaction-btn.ch-heart-active::before,
.j-reaction-button.active::before,.j-reaction-button.reacted::before,.j-reaction-button.ch-heart-active::before,
[data-reaction-action].active::before, [data-reaction-action].reacted::before, [data-reaction-action].ch-heart-active::before,
.reactions-trigger.active::before, .reactions-trigger.reacted::before, .reactions-trigger.ch-heart-active::before,
.likebtn.active::before,           .likebtn.reacted::before,           .likebtn.ch-heart-active::before,
a[data-handle="post-like"].active::before, a[data-handle="post-like"].reacted::before, a[data-handle="post-like"].ch-heart-active::before,
a[data-handle="reaction"].active::before,  a[data-handle="reaction"].reacted::before,  a[data-handle="reaction"].ch-heart-active::before {
    content: "❤";
    color: #ff3b5c !important;
    animation: ch-heart-pop 280ms ease;
}

/* 5. Pop animation on activation */
@keyframes ch-heart-pop {
    0%   { transform: scale(.6); }
    40%  { transform: scale(1.35); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1.00); }
}

/* 6. Hide stale text labels like "Like" -> we leave a single span for "Love"
   via JS; if a theme uses inline text, the ::before still works because the
   heart appears BEFORE the text. */
.btn-react .label-like,
.like-btn  .label-like,
.btn-react span.like-text,
.like-btn  span.like-text {
    display: none !important;
}

/* 7. Suppress reaction-count breakdowns that referenced multi-types
   (haha/wow/sad icons) — we just keep the total. */
.reactions-summary .reaction-icon[data-type="haha"],
.reactions-summary .reaction-icon[data-type="wow"],
.reactions-summary .reaction-icon[data-type="sad"],
.reactions-summary .reaction-icon[data-type="angry"],
.reactions-summary .reaction-icon[data-type="like"] {
    display: none !important;
}
.reactions-summary .reaction-icon[data-type="love"] {
    display: inline-block !important;
    color: #ff3b5c !important;
}