/* ==============================================
   100Calc Engine: Engagement Bar Styles v1.9
   - Consistent stroke icons for share (Copy/WebShare/X/WhatsApp/Reddit)
   - Facebook & LinkedIn filled (approved)
   - Tooltips fixed (no clipping)
   - No first-paint icon flash (SVG sizes in HTML)
   ============================================== */

.c100 .c100-engagement-bar {
  --eng-primary: var(--c100-primary, #004B7C);
  --eng-accent:  var(--c100-accent,  #00B47E);
  --eng-text:    var(--c100-text-dark, #1A1A1A);
  --eng-muted:   #555;
  --eng-border:  var(--c100-border, #E0E6EA);

  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--eng-border);
  color: var(--eng-text);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Base SVG: actual dimensions are set inline (width/height) */
.c100 .c100-engagement-bar svg {
  display: inline-block;
  vertical-align: text-bottom;
  fill: currentColor;
  flex-shrink: 0;
  shape-rendering: geometricPrecision;
}

/* Layout rows */
.c100 .c100-eng-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: nowrap;
}
.c100 .c100-eng-row--bottom { margin-top: .75rem; }

/* Groups */
.c100 .c100-eng-group {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: nowrap;
}

/* ---------- Feedback ---------- */
.c100 .c100-eng-group--feedback button {
  appearance: none;
  border: 1px solid var(--eng-border);
  background: #fff;
  color: var(--eng-muted);
  border-radius: 999px;
  padding: .35rem .8rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  transition: all .15s ease;
  font-size: .9rem;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
}
.c100 .c100-eng-group--feedback button:hover:not(.active):not(:disabled) {
  border-color: var(--eng-accent);
  color: var(--eng-accent);
  background: rgba(0, 180, 126, .08);
}
.c100 .c100-eng-group--feedback button.active {
  border-color: var(--eng-primary);
  color: var(--eng-primary);
  background: rgba(0, 75, 124, .10);
  font-weight: 700;
}
.c100 .c100-eng-group--feedback button:disabled { opacity: .6; cursor: not-allowed; }
.c100 .c100-eng-group--feedback .c100-eng-label { margin-right: .1em; }
.c100 .c100-eng-group--feedback .c100-eng-count {
  font-weight: 700;
  min-width: 1.2em;
  text-align: right;
  font-size: .95em;
  color: inherit;
}

/* ---------- Views ---------- */
.c100 .c100-eng-group--stats { gap: .5rem; }
.c100 .c100-eng-views {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--eng-muted);
}
.c100 .c100-eng-views .c100-eng-count { font-weight: 700; font-size: 0.9em; color: var(--eng-text); }
.c100 .c100-eng-label--views { font-size: .85em; color: var(--eng-muted); margin-left: -0.1em; }

/* ---------- Share (circle + grow) ---------- */
.c100 .c100-eng-group--share {
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.c100 .c100-eng-label--share {
  font-weight: 700;
  margin-right: .3rem;
  color: var(--eng-text);
  font-size: 0.9em;
  flex-shrink: 0;
}
.c100 .c100-eng-share-btn {
  appearance: none;
  display: inline-flex; justify-content: center; align-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--eng-border);
  border-radius: 999px;
  background-color: #fff;
  color: var(--eng-muted);
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
  flex-shrink: 0;
  overflow: visible; /* tooltips must not be clipped */
}
.c100 .c100-eng-share-btn:hover {
  transform: scale(1.08);
  border-color: var(--eng-primary);
  color: var(--eng-primary);
  background-color: rgba(0, 75, 124, 0.08);
}

/* Stroke-based share icons (Tabler) */
.c100 .c100-eng-share-btn.is-stroke svg {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Filled-brand icons (Facebook, LinkedIn) — normalized */
.c100 .c100-eng-share-btn.is-fill svg {
  fill: currentColor !important;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
/* Optional tweak if LinkedIn looks smaller on a given theme */
.c100 .c100-eng-share-btn.c100-eng-share-linkedin.is-fill svg {
  width: 14px;
  height: 14px;
}
/* Micro-adjust: Reddit stroke icon runs visually small vs. others */
.c100 .c100-eng-share-btn.c100-eng-share-reddit.is-stroke svg {
  transform: scale(1.12);          /* ~12% up for visual parity */
  transform-origin: 50% 50%;
  stroke-width: 2.1 !important;    /* slight weight boost to match */
}


/* Copy feedback */
.c100 .c100-copy-feedback {
  font-size: .85em;
  color: var(--eng-accent);
  font-weight: 700;
  min-width: 40px;
  padding-left: 0.3em;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.c100 .c100-copy-feedback.visible { opacity: 1; }

/* ---------- Tooltips (data-tip) ---------- */
.c100 [data-tip] { position: relative; }
.c100 [data-tip]::after, .c100 [data-tip]::before {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease .1s, visibility 0s linear .25s;
}
.c100 [data-tip]:hover::after, .c100 [data-tip]:focus-visible::after,
.c100 [data-tip]:hover::before, .c100 [data-tip]:focus-visible::before {
  opacity: 1; visibility: visible;
  transition: opacity .15s ease .1s, visibility 0s linear .1s;
}
.c100 [data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 9px);
  white-space: nowrap; background: rgba(26,26,26,.9); color: #fff;
  font-size: .78rem; font-weight: 500; line-height: 1.4; padding: .4rem .6rem; border-radius: 4px; z-index: 1000;
}
.c100 [data-tip]::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(100% + 4px); border: 5px solid transparent; border-top-color: rgba(26,26,26,.9);
  z-index: 999;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .c100 .c100-engagement-bar { font-size: .9rem; }
  .c100 .c100-eng-row { flex-wrap: wrap; }

  .c100 .c100-eng-row--top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
  }
  .c100 .c100-eng-group--feedback { flex-shrink: 0; }
  .c100 .c100-eng-group--stats    { flex-shrink: 0; text-align: right; }

  .c100 .c100-eng-row--bottom {
    width: 100%;
    border-top: 1px solid var(--eng-border);
    padding-top: .75rem;
    margin-top: .75rem;
  }
  .c100 .c100-eng-group--share { width: 100%; justify-content: flex-start; }

  .c100 .c100-eng-group--feedback button { padding: .3rem .7rem; gap: .3rem; font-size: .85rem; }
  .c100 .c100-eng-share-btn { width: 32px; height: 32px; }
}

/* Admin preview context */
body.c100-preview-context .c100-engagement-bar button,
body.c100-preview-context .c100-engagement-bar a {
  pointer-events: none !important;
  opacity: 0.65 !important;
  cursor: default !important;
}