:root {
    --bg-eng-text: #26282b;
    --bg-eng-muted: #7c828a;
    --bg-eng-border: #e6e7ea;
    --bg-eng-bg: #ffffff;
    --bg-eng-accent: #d9822b;
    --bg-eng-accent-soft: #fbeee0;
    --bg-eng-like: #e0245e;
    --bg-eng-like-soft: #fde5ec;
    --bg-eng-radius: 10px;
    --bg-eng-shadow: 0 6px 20px rgba(20, 20, 30, 0.10);
    --bg-eng-z: 2147483000;
}

.bg-engagement { margin: 18px 0; font-family: inherit; color: var(--bg-eng-text); }

.bg-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.bg-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--bg-eng-border);
    background: var(--bg-eng-bg);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--bg-eng-text);
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.bg-btn:hover { border-color: var(--bg-eng-accent); color: var(--bg-eng-accent); }
.bg-btn:hover .bg-icon svg { fill: var(--bg-eng-accent); }
.bg-btn:active { transform: scale(0.96); }

.bg-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; transition: transform 200ms ease; }
.bg-icon svg { width: 100%; height: 100%; fill: var(--bg-eng-muted); transition: fill 150ms ease; }
.bg-icon-share svg { fill: var(--bg-eng-muted); }

.bg-btn-like.is-active .bg-icon svg { fill: var(--bg-eng-like); }
.bg-btn-like.is-active { background: var(--bg-eng-like-soft); border-color: var(--bg-eng-like); color: var(--bg-eng-like); }
.bg-btn-save.is-active .bg-icon svg,
.bg-btn-share.is-active .bg-icon svg { fill: var(--bg-eng-accent); }
.bg-btn-save.is-active,
.bg-btn-share.is-active { background: var(--bg-eng-accent-soft); border-color: var(--bg-eng-accent); color: var(--bg-eng-accent); }

.bg-btn.bg-pulse .bg-icon { transform: scale(1.35); }

.bg-stats { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.bg-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--bg-eng-muted); }
.bg-stat-icon { display: inline-flex; width: 14px; height: 14px; }
.bg-stat-icon svg { width: 100%; height: 100%; }
.bg-stat-icon.bg-icon-like svg { fill: var(--bg-eng-like); opacity: 0.75; }
.bg-stat-icon.bg-icon-save svg,
.bg-stat-icon.bg-icon-share svg { fill: var(--bg-eng-muted); }
.bg-stat-count { font-variant-numeric: tabular-nums; transition: opacity 150ms ease; }
.bg-stat-count.bg-count-flash { opacity: 0.35; }

/* --- Popup / modal: panel lateral en desktop --- */
.bg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 25, 0.28);
    z-index: var(--bg-eng-z);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}
.bg-modal-overlay.bg-visible { opacity: 1; pointer-events: auto; }

.bg-modal {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 360px;
    max-width: 90vw;
    background: var(--bg-eng-bg);
    box-shadow: -12px 0 30px rgba(20,20,30,0.16);
    padding: 26px 22px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: transform 220ms ease;
}
.bg-modal-overlay.bg-visible .bg-modal { transform: translateX(0); }

.bg-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--bg-eng-muted);
}

.bg-modal-title { font-size: 16px; font-weight: 600; margin: 4px 0 6px; }
.bg-modal-text { font-size: 13.5px; color: var(--bg-eng-muted); margin-bottom: 16px; line-height: 1.5; }
.bg-modal-icon { font-size: 30px; margin-bottom: 6px; }
.bg-modal-actions { display: flex; gap: 10px; }
.bg-modal-btn {
    flex: 1; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--bg-eng-border);
    background: var(--bg-eng-bg); font-size: 13.5px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none; color: var(--bg-eng-text); display: inline-block;
}
.bg-modal-btn.bg-primary { background: var(--bg-eng-accent); border-color: var(--bg-eng-accent); color: #fff; }

.bg-share-options { display: flex; flex-direction: column; gap: 8px; }
.bg-share-option {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border: 1px solid var(--bg-eng-border); border-radius: 8px; background: var(--bg-eng-bg);
    cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--bg-eng-text);
}
.bg-share-option:hover { border-color: var(--bg-eng-accent); }

/* --- Toast --- */
.bg-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(10px);
    background: var(--bg-eng-text); color: #fff; padding: 12px 18px; border-radius: 999px;
    box-shadow: var(--bg-eng-shadow); display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; z-index: calc(var(--bg-eng-z) + 1); opacity: 0;
    transition: opacity 220ms ease, transform 220ms ease; max-width: 90vw;
}
.bg-toast.bg-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 991px) {
    .bg-modal {
        top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: auto;
        border-radius: 16px 16px 0 0; transform: translateY(100%); justify-content: flex-start;
    }
    .bg-modal-overlay.bg-visible .bg-modal { transform: translateY(0); }
}

@media (max-width: 575px) {
    .bg-btn .bg-label { display: none; }
    .bg-btn { padding: 9px 12px; }
    .bg-stats { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-btn, .bg-icon, .bg-modal-overlay, .bg-modal, .bg-toast, .bg-stat-count { transition: none !important; }
}