/* ============================================================
   Adawix — social.css | Tool Share Bar + Footer Social Icons
   Dark-first, RTL-first. CSS logical properties throughout —
   no margin-left/right, no padding-left/right anywhere.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TOOL SHARE BAR  (injected on every tool page)
   ════════════════════════════════════════════════════════════ */

.tool-share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  margin-block: var(--sp-2) var(--sp-6);
  margin-inline: auto;
  max-width: var(--container);
  width: 100%;
}

.tsb-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.tsb-label svg { width: 14px; height: 14px; opacity: .55; }

.tsb-divider { display: none; }

.tsb-buttons {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}

/* ── Share button base — icon-only circle ── */
.tsb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: 50%;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(245, 158, 11, 0.05);
  text-decoration: none;
  white-space: nowrap;
  isolation: isolate;
}
.tsb-btn svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Text labels hidden — screen readers use aria-label */
.tsb-btn span { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .tsb-btn {
    transition:
      transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 200ms ease,
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease;
  }
  .tsb-btn:hover  { transform: scale(1.14); }
  .tsb-btn:active { transform: scale(0.96); }
}

.tsb-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ── Tooltip ── */
.tsb-btn[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: rgba(9, 9, 15, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.14);
  color: #e8e0d0;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 7px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 20;
}
html.light .tsb-btn[data-tip]::before {
  background: rgba(26, 18, 8, 0.9);
  border-color: rgba(180, 83, 9, 0.2);
  color: #fef9f0;
}
.tsb-btn[data-tip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Per-platform hover — brand color reveal ── */
.tsb-wa:hover { background: rgba(37,211,102,.14); border-color: rgba(37,211,102,.6);  color: #25D366; box-shadow: 0 0 16px rgba(37,211,102,.22); }
.tsb-tg:hover { background: rgba(34,158,217,.14); border-color: rgba(34,158,217,.6);  color: #229ED9; box-shadow: 0 0 16px rgba(34,158,217,.22); }
.tsb-tw:hover { background: rgba(240,240,240,.08); border-color: rgba(240,240,240,.45); color: #f1f5f9; box-shadow: 0 0 12px rgba(255,255,255,.06); }
.tsb-fb:hover { background: rgba(24,119,242,.14); border-color: rgba(24,119,242,.6);  color: #1877F2; box-shadow: 0 0 16px rgba(24,119,242,.22); }
.tsb-li:hover { background: rgba(10,102,194,.14); border-color: rgba(10,102,194,.6);  color: #0A66C2; box-shadow: 0 0 16px rgba(10,102,194,.22); }

/* ── Copy link — pill with visible text ── */
.tsb-copy {
  width: auto;
  border-radius: 9999px;
  padding-inline: 14px;
  height: 38px;
  gap: 5px;
}
.tsb-copy span { display: inline; }
.tsb-copy svg  { width: 13px; height: 13px; }
.tsb-copy:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.14);
}

.tsb-copy.tsb-copied {
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  color: #22c55e !important;
}

@media (prefers-reduced-motion: no-preference) {
  .tsb-copy.tsb-copied { animation: tsbCopyPop .28s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
}

@keyframes tsbCopyPop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* ── Native Web Share ── */
.tsb-native {
  display: none;
  background: rgba(245, 158, 11, 0.05);
  border-color: rgba(245, 158, 11, 0.12);
  color: var(--text-muted);
}
.tsb-native:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.14);
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .tsb-label   { width: 100%; margin-block-end: var(--sp-1); }
  .tsb-buttons { width: 100%; }
}


/* ════════════════════════════════════════════════════════════
   BLOG SHARE BUTTON  (compact pill + popover, blog articles only)
   ════════════════════════════════════════════════════════════ */

.blog-share-btn {
  position: relative;
  display: inline-flex;
  margin-block: var(--sp-4) var(--sp-6);
}

.bsb-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 16px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.06);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.bsb-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.bsb-toggle:hover {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--primary);
  background: rgba(245, 158, 11, 0.1);
}
.bsb-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.bsb-toggle[aria-expanded="true"] {
  border-color: rgba(245, 158, 11, 0.5);
  color: var(--primary);
}

.bsb-drop {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 200;
  white-space: nowrap;
}
.bsb-drop[hidden] { display: none; }

html.light .bsb-toggle { border-color: rgba(180, 83, 9, 0.25); background: rgba(180, 83, 9, 0.05); }
html.light .bsb-toggle:hover,
html.light .bsb-toggle[aria-expanded="true"] { border-color: rgba(180, 83, 9, 0.5); }
html.light .bsb-drop { background: #fff; border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }


/* ════════════════════════════════════════════════════════════
   FOOTER SOCIAL ICONS  (compact icon-only bar)
   Footer is always dark — no html.light overrides needed.
   ════════════════════════════════════════════════════════════ */

.footer-social {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-block-start: var(--sp-4);
}

/* ── Icon button base ── */
.fs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  text-decoration: none;
  isolation: isolate;
}

.fs-btn svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

@media (prefers-reduced-motion: no-preference) {
  .fs-btn {
    transition:
      transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 200ms ease,
      border-color 200ms ease,
      box-shadow 200ms ease,
      color 200ms ease;
  }
  .fs-btn:hover { transform: translateY(-2px); }
}

.fs-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ── Per-platform hover glow ── */
.fs-wa:hover { background: rgba(37,211,102,.15); border-color: rgba(37,211,102,.4);  color: #25D366; box-shadow: 0 4px 14px rgba(37,211,102,.2); }
.fs-tg:hover { background: rgba(34,158,217,.15); border-color: rgba(34,158,217,.4);  color: #229ED9; box-shadow: 0 4px 14px rgba(34,158,217,.2); }
.fs-tw:hover { background: rgba(220,220,220,.1);  border-color: rgba(220,220,220,.3); color: #e2e8f0; box-shadow: 0 4px 12px rgba(200,200,200,.1); }
.fs-fb:hover { background: rgba(24,119,242,.15);  border-color: rgba(24,119,242,.4);  color: #1877F2; box-shadow: 0 4px 14px rgba(24,119,242,.2); }
.fs-ig:hover { background: rgba(228,64,95,.15);   border-color: rgba(228,64,95,.4);   color: #E4405F; box-shadow: 0 4px 14px rgba(228,64,95,.2); }
.fs-tt:hover { background: rgba(105,201,208,.1);  border-color: rgba(105,201,208,.35); color: #69C9D0; box-shadow: 0 4px 12px rgba(105,201,208,.15); }

/* ── Telegram live pulse ── */
.fs-live-dot {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .fs-live-dot { animation: pulse-live 2s ease-out infinite; }
}

@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}