/* Article like/reaction button + count, light and dark mode - used by test.php. */
.reaction {
    display: flex;
    justify-content: flex-end;
    align-items: bottom;
    gap: 12px;
    padding: 10px 0;
    font-family: Arial, sans-serif;
}

/* LIKE TEXT */
.like-description {
    font-size: 16px;
    font-weight: 700;
    color: #333; /* light mode */
    margin-right: 3px;
    transition: color 0.3s ease;
}

/* ICON BUTTON */
.like-btn button {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 28px;
    cursor: pointer;
    border: none;
    background: transparent; /* ✅ no background */
    color: #000; /* default light mode */
    transition: all 0.25s ease;
    padding: 2px 4px;
}

/* LIKED STATE (LIGHT MODE) */
.like-btn button.liked {
    color: #0d6efd; /* modern blue */
}

.like-description.liked-text {
    color: #0d6efd;
}

/* COUNT */
#likeCount {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}

/* =========================
DARK MODE
========================= */
body.dark-mode .like-description {
    color: #ddd;
}

body.dark-mode .like-btn button {
    color: #bbb;
}

body.dark-mode .like-btn button.liked {
    color: #4dabf7; /* brighter blue for dark */
}

body.dark-mode .like-description.liked-text {
    color: #4dabf7;
}

body.dark-mode #likeCount {
    color: #ccc;
}