/* ── Bosta share widget ── */
.share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1.5px solid var(--border, #E2E8F0); border-radius: 999px;
  background: var(--bg-2, #F8FAFC); color: var(--fg-2, #475569);
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.share-btn:hover { border-color: var(--primary, #0B7FFE); color: var(--primary, #0B7FFE); background: #fff; }
.share-btn svg { width: 14px; height: 14px; }

.share-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 180ms ease;
}
.share-backdrop.open { opacity: 1; pointer-events: auto; }
.share-sheet {
  width: 100%; max-width: 420px;
  background: var(--bg, #fff); color: var(--ink, #0F172A);
  border: 1px solid var(--border, #E2E8F0); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,42,.22);
  padding: 20px 20px 18px;
  transform: translateY(12px) scale(.98); transition: transform 180ms cubic-bezier(.2,.7,.3,1);
  font-family: var(--font-ar, 'IBM Plex Sans Arabic', system-ui, sans-serif);
}
.share-backdrop.open .share-sheet { transform: none; }
.share-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.share-title { font-size: 15px; font-weight: 700; }
.share-sub {
  font-size: 12px; color: var(--fg-3, #94A3B8); margin-top: 3px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.share-close {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg-3, #94A3B8); background: var(--bg-2, #F8FAFC); border: 1px solid var(--border, #E2E8F0);
  cursor: pointer;
}
.share-close:hover { color: var(--ink, #0F172A); }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.share-net {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px 10px; border-radius: 12px;
  border: 1px solid var(--border, #E2E8F0); background: var(--bg-2, #F8FAFC);
  color: var(--fg-2, #475569); font-size: 11px; font-weight: 600; cursor: pointer;
  text-decoration: none; transition: transform 120ms, border-color 120ms, background 120ms;
}
.share-net:hover { transform: translateY(-2px); border-color: var(--primary, #0B7FFE); background: #fff; }
.share-net-icon {
  width: 36px; height: 36px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.share-net-icon svg { width: 18px; height: 18px; fill: currentColor; }
.share-net[data-net="x"] .share-net-icon        { background: #0F172A; }
.share-net[data-net="facebook"] .share-net-icon { background: #1877F2; }
.share-net[data-net="whatsapp"] .share-net-icon { background: #25D366; }
.share-net[data-net="telegram"] .share-net-icon { background: #229ED9; }
.share-net[data-net="linkedin"] .share-net-icon { background: #0A66C2; }
.share-net[data-net="email"] .share-net-icon    { background: #64748B; }
.share-net[data-net="native"] .share-net-icon   { background: var(--primary, #0B7FFE); }
.share-link {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  border: 1.5px solid var(--border, #E2E8F0); border-radius: 10px; padding: 6px 6px 6px 12px;
  background: var(--bg-2, #F8FAFC);
}
.share-link input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--font-en, 'Hanken Grotesk', system-ui, sans-serif); font-size: 12px; color: var(--fg-2, #475569);
  direction: ltr; text-align: left;
}
.share-link button {
  height: 32px; padding: 0 14px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--ink, #0F172A); color: #fff; font-size: 12px; font-weight: 600; font-family: inherit;
  white-space: nowrap; transition: background 120ms;
}
.share-link button:hover { background: var(--primary, #0B7FFE); }
@media (max-width: 480px) { .share-grid { grid-template-columns: repeat(3, 1fr); } }