/* Force the real select to be visible and hide the theme’s clone next to it */
.native-select {
    display: block !important;
}

.native-select+.nice-select {
    display: none !important;
}

/* Prevent invisible overlays from eating the first click */
.mm-backdrop,
.offcanvas-backdrop,
.modal-backdrop.fade:not(.show) {
    pointer-events: none !important;
}

/* Base circular button */
.reaction-btn {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    background: #efefef;
    /* idle circle visible */
    transition: background-color 140ms ease, transform 100ms ease;
    line-height: 0;
    /* tight fit for the icon */
}


/* No outlines/rings from Bootstrap */
.reaction-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Hover lift (subtle) */
.reaction-btn:hover {
    transform: translateY(-1px);
}

/* The SVG icon inside */
.reaction-icon {
    fill: #555555;
    /* idle icon (dark grey) */
    transition: fill 140ms ease;
}

/* ------- Actions ------- */
.reaction-action:hover,
.reaction-action.is-active {
    background: #ffe5ea;
    /* light red circle on hover or active */
}

/* ------- Preview ------- */
.reaction-preview:hover,
.reaction-preview.is-active {
    background: #ffe5ea;
    /* light red circle on hover or active */
}

.reaction-preview:hover .reaction-icon,
.reaction-preview.is-active .reaction-icon {
    fill: #99e11d;
    /* bright red heart */
}

/* ------- LIKE (heart) ------- */
.reaction-like:hover,
.reaction-like.is-active {
    background: #ffe5ea;
    /* light red circle on hover or active */
}

.reaction-like:hover .reaction-icon,
.reaction-like.is-active .reaction-icon {
    fill: #e11d48;
    /* bright red heart */
}

/* ------- FAVORITE (star) ------- */
.reaction-fav:hover,
.reaction-fav.is-active {
    background: #fff7e0;
    /* very light gold circle on hover or active */
}

.reaction-fav:hover .reaction-icon,
.reaction-fav.is-active .reaction-icon {
    fill: #ffc107;
    /* bright gold star */
}

/* ------- VIEWS (binoculars) ------- */
.reaction-btn.reaction-views {
    background: #efefef !important;
    /* light green */
}

.reaction-btn.reaction-views .reaction-icon {
    color: #0b4922 !important;
    /* green-600 */
}

.reaction-btn.reaction-views:hover {
    background: #15803d !important;
    /* dark green */
}

.reaction-btn.reaction-views:hover .reaction-icon {
    color: #ffffff !important;
    /* white icon */
}

/* ------- COMMENTS (bubble) ------- */
/* Closed (idle) – light grey circle, dark grey icon (inherits base .reaction-btn / .reaction-icon) */
.reaction-comment {}

/* Hover/Active – light blue circle and blue icon */
.reaction-comment:hover,
.reaction-comment.is-active {
    background: #e0f2ff;
    /* very light blue */
}

.reaction-comment:hover .reaction-icon,
.reaction-comment.is-active .reaction-icon {
    color: #0ea5e9;
    /* blue-500 */
}

.primary-hover {
  color: grey;
}

.primary-hover.expanded {
  color: rgb(191, 191, 17);
}

.primary-hover:hover {
  color: #0ea5e9; /* blue on hover */
}