:root {
  --ui-bg: #ffffff;
  --ui-border: #d2d2d7;
  --ui-border-soft: #e5e5ea;

  --ui-text: #1c1c1e;
  --ui-text-muted: #6e6e73;

  --ui-primary: #007aff;       /* Apple Blue */
  --ui-primary-soft: #e6f0ff;

  --ui-danger: #ff3b30;

  --ui-radius: 12px;
  --ui-radius-sm: 10px;

  --ui-shadow: 0 8px 24px rgba(0,0,0,0.12);
  --ui-shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===============================
   ACTION BUTTONS (Apple-like)
================================ */

.sig-popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

/* בסיס משותף */
.sig-popup-actions button {
  flex: 1;
  height: 44px;

  border-radius: 3px;
  font-size: 15px;
  font-weight: 500;

  cursor: pointer;
  outline: none;
  user-select: none;

  transition:
    background-color .15s ease,
    box-shadow .15s ease,
    transform .1s ease;
}

/* ===============================
   PRIMARY – שמור
================================ */

.btn-primary.sig-save {
  background: #123A5F!important;
  color: #ffffff!important;
  border: none;

  box-shadow:
    0 1px 0 rgba(0,0,0,0.05),
    0 4px 12px rgba(0,122,255,0.25)!important;
}

.btn-primary.sig-save:hover {
  background: #0A1A2F!important;
  color: #D66565!important;
}

.btn-primary.sig-save:active {
  transform: scale(0.98)!important;
  box-shadow:
    0 2px 6px rgba(0,122,255,0.35)!important;
}

/* ===============================
   SECONDARY – ביטול
================================ */

.btn-secondary.sig-cancel {
  background: #F7F9FB!important;
  color: #3D6A90!important;
  border: 1px solid #E3E7EE!important;
}

.btn-secondary.sig-cancel:hover {
  background: #0A1A2F!important;
  color: #D66565!important;
}

.btn-secondary.sig-cancel:active {
  transform: scale(0.98)!important;
  background: #dedee3!important;
}

/* ===============================
   FOCUS (נגישות)
================================ */

.sig-popup-actions button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(0,122,255,0.35);
}

/* ===============================
   POPUP BASE
================================ */
.sig-popup {
  position: fixed;
  inset: 0;
  z-index: 25;
}

.sig-popup.hidden {
  display: none;
}

.sig-popup-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(4px);
}

/* ===============================
   POPUP BOX
================================ */

.sig-popup-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 420px;
  max-width: calc(100vw - 32px);

  background: #ffffff;
  border-radius: 12px;
  
  padding: 20px 20px 18px;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),         /* צל חיצוני */
    inset 0 1px 1px rgba(255,255,255,0.6), /* highlight פנימי */
    inset 0 -1px 2px rgba(0,0,0,0.15);     /* עומק פנימי */

  display: flex;
  flex-direction: column;
  gap: 14px;

  /* 🔴 זה החסר */
  align-items: center;
}


/* ===============================
   IMAGE STAGE (Viewport)
================================ */

.sig-image-stage {
  position: relative;
  width: 100%;
  height: 260px;

  background:#E3E7EE!important;
  border-radius: 12px;

text-align: center!important;
  
  user-select: none;
  
  display: flex;
  align-items: center!important;
  justify-content: center!important;
}
.sig-image-stage.is-logo {
  height: 140px;
}

#sig-edit-image{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  cursor: grab;
  will-change: transform;

  max-width: none;
  max-height: none;

  /* ❌ חשוב: אין כאן transform בכלל */
}




#sig-edit-image:active {
  cursor: grabbing;
}
.sig-drop-text {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
 align-self: center!important;
  font-size: 15px;
  font-weight: 500;
  color: #6e6e73;

  pointer-events: none;
}
.sig-add-image-link {
  align-self: center;

  font-size: 14px;
  font-weight: 500;
  color: #007aff;

  text-decoration: none;
  cursor: pointer;

  transition: opacity .15s ease;
}

.sig-add-image-link:hover {
  opacity: 0.75;
}

/* ===============================
   ZOOM CONTROLS
================================ */
.sig-zoom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.sig-zoom-controls button {
  width: 44px;
  height: 44px;

  border-radius: 50%;
  border: 1px solid #e5e5ea!important;
  background: #E3E7EE!important;

  font-size: 22px;
  font-weight: 500;
  color: #0A1A2F!important;

  cursor: pointer;
  transition:
    background .15s ease,
    transform .15s ease;
}

.sig-zoom-controls button:hover {
  background: #f5f5f7!important;
   color: #D66565!important;
}

.sig-zoom-controls button:active {
  transform: scale(.9);
}

.sig-zoom-value {
  min-width: 56px;
  text-align: center;

  font-size: 14px;
  font-weight: 500;
  color: #6e6e73;
}
.sig-popup-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.sig-popup-actions button {
  flex: 1;
}
.sig-popup:not(.hidden) .sig-popup-box {
  animation: popupIn .25s cubic-bezier(.2,.8,.2,1);
}

@keyframes popupIn {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}