/* ═══ בועיות הכוונה (onboarding-hints.js) — עיצוב עצמאי, לא משתף סלקטור
   עם אף רכיב קיים ═══ */
.np-hint-bubble {
  position: fixed;
  z-index: 600;                 /* מעל ה-FAB (500) */
  max-width: 240px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16);
  padding: 12px 14px 10px;
  font-family: var(--font-ui);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.np-hint-bubble.is-in { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.np-hint-text {
  font-size: 13px; font-weight: 600; line-height: 1.45;
  color: var(--text); padding-inline-end: 16px;   /* מקום ל-× */
}

.np-hint-actions {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 8px;
}
.np-hint-mute {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 700;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.np-hint-mute:hover { color: var(--text); }

.np-hint-x {
  position: absolute; top: 6px; inset-inline-end: 8px;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.np-hint-x:hover { background: rgba(0,0,0,0.06); color: var(--text); }

.np-hint-arrow {
  position: absolute; bottom: -6px; left: 0;
  width: 14px; height: 14px;
  background: var(--white);
  border-inline-end: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .np-hint-bubble { transition: opacity 0.15s ease; transform: none; }
  .np-hint-bubble.is-in { transform: none; }
}