/* =========================================================
   03 - NEWS CARD / LIKE UNLIKE FIX
========================================================= */

.reaction-btn,
.detail-reaction-btn {
    min-width: 44px !important;
    height: 32px !important;
    padding: 0 9px !important;
    border: 1px solid #e6ebf2 !important;
    border-radius: 999px !important;
    background: #f7f9fc !important;
    color: #7b8794 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: .22s ease !important;
}

.reaction-btn i,
.detail-reaction-btn i {
    font-size: 13px !important;
    color: currentColor !important;
}

.reaction-btn span,
.detail-reaction-btn span {
    color: currentColor !important;
    font-weight: 700 !important;
}

.reaction-btn[data-reaction="like"]:hover,
.detail-reaction-btn[data-reaction="like"]:hover {
    border-color: var(--btv-dark) !important;
    background: rgba(6, 26, 51, .08) !important;
    color: var(--btv-dark) !important;
}

.reaction-btn[data-reaction="unlike"]:hover,
.detail-reaction-btn[data-reaction="unlike"]:hover {
    border-color: var(--btv-red) !important;
    background: rgba(180, 0, 25, .08) !important;
    color: var(--btv-red) !important;
}

.reaction-btn[data-reaction="like"].is-active,
.detail-reaction-btn[data-reaction="like"].is-active {
    background: var(--btv-dark) !important;
    border-color: var(--btv-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(6, 26, 51, .20) !important;
}

.reaction-btn[data-reaction="unlike"].is-active,
.detail-reaction-btn[data-reaction="unlike"].is-active {
    background: var(--btv-red) !important;
    border-color: var(--btv-red) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(180, 0, 25, .20) !important;
}

.reaction-btn.is-active i,
.detail-reaction-btn.is-active i,
.reaction-btn.is-active span,
.detail-reaction-btn.is-active span {
    color: #ffffff !important;
}

.reaction-btn:disabled,
.detail-reaction-btn:disabled {
    opacity: .65 !important;
    cursor: wait !important;
}

.premium-news-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.premium-news-actions,
.detail-reactions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.premium-news-meta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.premium-news-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #98a2b3 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.premium-news-meta i {
    color: var(--btv-red) !important;
}

@media (max-width: 768px) {
    .reaction-btn,
    .detail-reaction-btn {
        min-width: 40px !important;
        height: 30px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
    }

    .premium-news-actions,
    .detail-reactions {
        gap: 6px !important;
    }
}