/* =========================
   PREVIEW CANVAS
========================= */

.sig-preview-canvas {
  position: relative;
  overflow: visible; /* חובה – לא לחתוך את ההודעה */
}

/* =========================
   FEEDBACK WRAPPER
========================= */

.sig-feedback {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);

  opacity: 0;
  pointer-events: none;
  z-index: 20;

  transition:
    opacity .18s ease,
    transform .18s ease;
}

/* מצב גלוי */
.sig-feedback.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   FEEDBACK BUBBLE
========================= */

.sig-feedback-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 16px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;

  background: var(--accent-strong);
  color: var(--accent-soft);

  box-shadow:
    0 6px 18px rgba(0,0,0,0.12);
}

/* =========================
   TYPES (STATE COLORS)
========================= */

/* INFO */
.sig-feedback.info .sig-feedback-text {
  background: var(--accent-strong);
  color: var(--accent-soft);
  box-shadow: 0 6px 18px rgba(30,58,138,0.18);
}

/* SUCCESS */
.sig-feedback.success .sig-feedback-text {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: 0 6px 18px rgba(6,95,70,0.18);
}

/* ERROR */
.sig-feedback.error .sig-feedback-text {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: 0 6px 18px rgba(153,27,27,0.18);
}

/* =========================
   MICRO ANIMATION
========================= */

.sig-feedback-text.pulse {
  animation: sigFeedbackPulse 0.35s ease;
}

@keyframes sigFeedbackPulse {
  0%   { transform: scale(0.96); opacity: .85; }
  100% { transform: scale(1); opacity: 1; }
}