/* ============================================================
   Facebook-style Reactions CSS
   ضع في: css/fb_reactions.css
   واستدعه في الـ head: <link rel="stylesheet" href="css/fb_reactions.css">
   ============================================================ */

/* زر اللايك */
.fb-like-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.fb-action-btn {
    background: none; border: none;
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: #606770;
    border-radius: 8px; transition: background .15s;
}
.fb-action-btn:hover { background: rgba(0,0,0,0.06); }
.fb-btn-ico { font-size: 18px; line-height: 1; }

/* حالات الريأكشن النشط */
.fb-btn-active-like  .fb-btn-lbl,
.fb-btn-active-like  .fb-btn-ico { color: #1877f2; }
.fb-btn-active-love  .fb-btn-lbl,
.fb-btn-active-love  .fb-btn-ico { color: #e0245e; }
.fb-btn-active-haha  .fb-btn-lbl,
.fb-btn-active-haha  .fb-btn-ico { color: #f7b928; }
.fb-btn-active-wow   .fb-btn-lbl,
.fb-btn-active-wow   .fb-btn-ico { color: #f4730e; }
.fb-btn-active-sad   .fb-btn-lbl,
.fb-btn-active-sad   .fb-btn-ico { color: #5b9bd5; }
.fb-btn-active-angry .fb-btn-lbl,
.fb-btn-active-angry .fb-btn-ico { color: #e9595b; }

/* Popup الريأكشن */
.fb-popup-box {
    position: fixed;
    background: var(--back_box, #fff);
    border-radius: 30px;
    padding: 8px 10px;
    display: flex; gap: 6px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.22);
    z-index: 99999;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.85);
    transform-origin: bottom center;
    transition: opacity 0.18s, transform 0.18s;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.08);
}
.fb-popup-box.fb-popup-show {
    opacity: 1;
    transform: scale(1);
    pointer-events: all;
}
.fb-popup-item {
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; padding: 3px 4px; border-radius: 8px;
    transition: transform .14s; position: relative;
}
.fb-popup-item:hover { transform: scale(1.4) translateY(-5px); }
.fb-popup-item span { font-size: 26px; line-height: 1; }
.fb-popup-item label {
    font-size: 10px; cursor: pointer;
    background: rgba(0,0,0,0.72); color: #fff;
    padding: 2px 5px; border-radius: 6px;
    display: none; white-space: nowrap;
    position: absolute; bottom: -22px; left: 50%;
    transform: translateX(-50%);
}
.fb-popup-item:hover label { display: block; }

/* ملخص التفاعلات */
.fb-react-summary-row {
    display: inline-flex; align-items: center; gap: 2px;
    cursor: pointer; padding: 2px 4px; border-radius: 10px;
    transition: background .15s;
}
.fb-react-summary-row:hover { background: rgba(0,0,0,0.06); }
.fb-react-badge { font-size: 14px; line-height: 1; }
.fb-react-count { font-size: 12px; color: #606770; margin-right: 2px; }