/* Unled article-footer engagement + share bar.
   Design intent:
   - Reads as a compact WordPress-style meta strip, NOT a hero panel.
   - Icons + numbers only, no gradient background, no thick padding.
   - Share buttons are 32px squares in a single horizontal row.
   - Everything sits on the site's existing bg-card tokens so it never
     visually competes with the article body. */

/* ── Engagement stats (views · likes · shares + Like button) ────────── */
.unled-eng{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:36px 0 12px;padding:10px 14px;
  border-radius:10px;
  background:rgba(15,23,42,.55);
  border:1px solid rgba(96,165,250,.14);
  color:#94a3b8;
  font-size:13px;line-height:1.4;
}
.unled-eng__meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;color:inherit}
.unled-eng__meta > span{display:inline-flex;align-items:center;gap:6px;color:#cbd5e1}
.unled-eng__meta strong{color:#f8fafc;font-weight:700;font-variant-numeric:tabular-nums;min-width:1ch}
.unled-eng__meta svg{width:14px;height:14px;color:#64748b;flex-shrink:0}
.unled-eng__meta .dot{color:#475569;font-weight:400;user-select:none}

.unled-eng__actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.unled-eng__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 12px;border-radius:999px;
  background:rgba(30,41,59,.65);border:1px solid rgba(148,163,184,.2);
  color:#cbd5e1;font-family:inherit;font-size:12px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.unled-eng__btn:hover{background:rgba(30,41,59,.9);border-color:rgba(96,165,250,.45);color:#f8fafc}
.unled-eng__btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.unled-eng__btn svg{width:13px;height:13px}
.unled-eng__like.is-liked{background:rgba(239,68,68,.14);border-color:rgba(244,63,94,.55);color:#f87171}
.unled-eng__like.is-liked svg{fill:currentColor}

[dir="rtl"] .unled-eng__actions{margin-left:0;margin-right:auto}

@media(max-width:520px){
  .unled-eng{gap:8px;padding:10px 12px;font-size:12px}
  .unled-eng__meta{gap:10px;width:100%}
  .unled-eng__actions{margin-left:0;width:100%;justify-content:flex-end}
}

/* ── Share bar (X · WhatsApp · Telegram · LinkedIn · Reddit · Email · Copy) ── */
.unled-share{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:0 0 28px;padding:8px 14px;
  border-radius:10px;
  background:transparent;
  border:1px dashed rgba(96,165,250,.16);
}
.unled-share__label{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#94a3b8;flex-shrink:0;
}
.unled-share__list{display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.unled-share__list li{margin:0}
.unled-share__btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;
  background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.16);
  color:#94a3b8;text-decoration:none;cursor:pointer;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}
.unled-share__btn:hover{background:rgba(30,41,59,.9);color:#f8fafc}
.unled-share__btn:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.unled-share__btn svg{width:14px;height:14px;fill:currentColor}
.unled-share__btn--tw:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.unled-share__btn--wa:hover{color:#25d366;border-color:rgba(37,211,102,.5)}
.unled-share__btn--tg:hover{color:#26a5e4;border-color:rgba(38,165,228,.5)}
.unled-share__btn--ln:hover{color:#0a66c2;border-color:rgba(10,102,194,.5)}
.unled-share__btn--rd:hover{color:#ff4500;border-color:rgba(255,69,0,.5)}
.unled-share__btn--em:hover{color:#a78bfa;border-color:rgba(167,139,250,.5)}
.unled-share__btn--cp.is-copied{color:#22c55e;border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.1)}

[dir="rtl"] .unled-share{direction:rtl}

@media(max-width:520px){
  .unled-share{gap:8px;padding:8px 10px}
  .unled-share__list{gap:5px}
  .unled-share__btn{width:30px;height:30px}
}

/* ── Comments (WordPress-style) ─────────────────────────────────────── */
.unled-comments{
  margin:32px 0 24px;padding:22px 24px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(15,23,42,.68),rgba(10,16,32,.68));
  border:1px solid rgba(148,163,184,.14);
}
.unled-comments__heading{
  font-size:18px;font-weight:800;color:#f8fafc;margin:0 0 4px;
  display:flex;align-items:baseline;gap:8px;
}
.unled-comments__heading .count{color:#93c5fd;font-variant-numeric:tabular-nums;font-weight:700;font-size:15px}
.unled-comments__intro{color:#94a3b8;font-size:13px;line-height:1.55;margin:0 0 18px;max-width:640px}

.unled-comments__list{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.comment-item{display:flex;gap:12px;padding:14px;background:rgba(15,23,42,.55);border:1px solid rgba(148,163,184,.1);border-radius:10px}
.comment-item--nested{margin-inline-start:44px;background:rgba(30,41,59,.55);border-color:rgba(96,165,250,.14)}
.comment-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:800;overflow:hidden;
}
.comment-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.comment-body{flex:1;min-width:0}
.comment-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin-bottom:6px;color:#94a3b8;font-size:12px}
.comment-author{color:#dbeafe;font-weight:700;font-size:13px}
.comment-author--verified::after{
  content:"\2713";display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-inline-start:5px;border-radius:50%;
  background:#3b82f6;color:#fff;font-size:9px;font-weight:900;vertical-align:middle;
}
.comment-role{padding:1px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(139,92,246,.16);color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}
.comment-role--author{background:rgba(59,130,246,.16);color:#93c5fd;border-color:rgba(59,130,246,.3)}
.comment-date{color:#64748b;font-variant-numeric:tabular-nums}
.comment-text{color:#cbd5e1;font-size:14px;line-height:1.65;margin:0}
.comment-text p{margin:0 0 8px}
.comment-text p:last-child{margin:0}
.comment-actions{display:flex;gap:14px;margin-top:8px;font-size:12px;color:#64748b}
.comment-reply{background:none;border:0;color:#93c5fd;font:inherit;font-weight:600;padding:0;cursor:pointer}
.comment-reply:hover{color:#dbeafe;text-decoration:underline}

.unled-comments__form{display:flex;flex-direction:column;gap:14px;padding:18px;background:rgba(4,7,25,.55);border:1px solid rgba(96,165,250,.16);border-radius:10px}
.unled-comments__form legend{font-size:13px;font-weight:700;color:#dbeafe;padding:0 0 8px;letter-spacing:.02em}
.unled-comments__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.unled-comments__row{grid-template-columns:1fr}}
.unled-comments__field{display:flex;flex-direction:column;gap:5px}
.unled-comments__field label{font-size:11px;font-weight:700;color:#94a3b8;letter-spacing:.04em;text-transform:uppercase}
.unled-comments__field input,
.unled-comments__field textarea{
  padding:10px 12px;border-radius:8px;
  background:rgba(15,23,42,.68);border:1px solid rgba(148,163,184,.22);
  color:#f8fafc;font-family:inherit;font-size:14px;line-height:1.55;
  transition:border-color .16s ease,background .16s ease;
}
.unled-comments__field input:focus,
.unled-comments__field textarea:focus{outline:none;border-color:rgba(96,165,250,.55);background:rgba(15,23,42,.88)}
.unled-comments__field textarea{resize:vertical;min-height:96px}
.unled-comments__actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px}
.unled-comments__submit{
  display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border-radius:8px;
  background:linear-gradient(135deg,#3b82f6,#8b5cf6);border:1px solid rgba(255,255,255,.16);
  color:#fff;font-weight:700;font-size:13px;cursor:pointer;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.unled-comments__submit:hover{filter:brightness(1.08);box-shadow:0 8px 22px -8px rgba(139,92,246,.6)}
.unled-comments__submit:disabled{opacity:.55;cursor:default;transform:none}
.unled-comments__note{font-size:11px;color:#64748b;line-height:1.45}
.unled-comments__status{font-size:13px;color:#94a3b8}
.unled-comments__status.ok{color:#22c55e}
.unled-comments__status.error{color:#f87171}
.unled-comments__load-more{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  background:rgba(30,41,59,.55);border:1px solid rgba(96,165,250,.22);color:#93c5fd;
  font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;margin-top:6px;
}
.unled-comments__load-more:hover{background:rgba(30,41,59,.85);color:#dbeafe;border-color:rgba(96,165,250,.5)}

[dir="rtl"] .unled-comments{direction:rtl}
[dir="rtl"] .comment-item--nested{margin-inline-start:0;margin-inline-end:44px}

/* Comment reactions + not-helpful follow-up menu */
.comment-reactions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.comment-react{
  background:rgba(15,23,42,.75);border:1px solid rgba(148,163,184,.22);color:#cbd5e1;
  padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.comment-react:hover{color:#dbeafe;border-color:rgba(96,165,250,.45);background:rgba(30,41,59,.85)}
.comment-react--like.is-liked{color:#93c5fd;border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.12)}
.comment-react--like.is-liked svg{color:#93c5fd;fill:currentColor}
.comment-react--nothelpful{color:#94a3b8}
.comment-like-count{font-variant-numeric:tabular-nums;min-width:1ch}
.comment-followup{position:relative;display:inline-block}
.comment-followup-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:280px;z-index:40;
  background:#0f172a;border:1px solid rgba(96,165,250,.28);border-radius:12px;
  padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.comment-followup-menu[hidden]{display:none!important}
.comment-followup-title{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:#64748b;padding:8px 10px 6px;
}
.comment-followup-opt{
  display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;font-weight:600;
  color:#e2e8f0;text-decoration:none;border-radius:8px;
  transition:background .15s ease,color .15s ease;
}
.comment-followup-opt:hover{background:rgba(59,130,246,.12);color:#93c5fd}
.comment-followup-icon{font-size:16px;line-height:1;flex:0 0 22px;text-align:center}
[dir="rtl"] .comment-followup-menu{left:auto;right:0}