:root {
    /* צבעי בסיס */
    --color-white: #FFFFFF;
    --color-soft-white: #F7F9FB;
    --color-border: #E3E7EE;

    /* פלטת כחולים */
    --blue-night: #0A1A2F;
    --blue-ocean: #123A5F;
    --blue-sky: #3D6A90;

    /* טקסט */
    --text-main: #0A1A2F;
    --text-muted: #526174;
    --text-light: #8C9AAF;
}

.sig-builder {
  display: flex;
  gap: 24px;
  margin: 25px auto;
  max-width: 1280px;
  direction: rtl;
flex-direction: row-reverse;
  justify-content: flex-start; /* ← קריטי */
  align-items: flex-start;     /* ← מונע קפיצות */
}

/* PREVIEW */
.sig-builder-preview {
  width: 628px;
  gap: 15px;
}

.sig-preview-canvas {
  background: var(--accent-soft);
  padding: 34px 24px 34px 24px;
  border-radius: 6px;
  border: 2px solid var(--accent-border);

  display: flex;
  flex-direction: column;   /* 🔑 */
  align-items: center;      /* מרכז אופקית */
  gap: 14px;                /* רווח בין כותרת לכרטיס */
}

.sig-avatar.is-default {
  object-fit: contain;
  background: #F7F9FB;
}

/* ==========================
   QR WRAPPER
========================== */
.sig-qr-wrapper {
  width: var(--qr-size, 110px);
  height: var(--qr-size, 110px);

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* ==========================
   QR SVG CANVAS
========================== */
.sig-qr-canvas {
  width: 100%;
  height: 100%;
}

/* ==========================
   QR SVG CONTROL
========================== */
.sig-qr-canvas svg {
  width: 100%;
  height: 100%;
}

/* צבע ראשי ל־QR */
.sig-qr-canvas svg path,
.sig-qr-canvas svg rect,
.sig-qr-canvas svg circle {
  fill: var(--qr-color, #0A1A2F);
}

/*********לאחר יצירת QR*******/
/* QR container: controls size */
.sig-qr-box{
  width: var(--qr-size, 110px);
  height: var(--qr-size, 110px);

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.0);
}

/* default image */
.sig-qr-default{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* live QR */
.sig-qr-live{
  width: 100%;
  height: 100%;
  display: none;
}

/* ensure canvas fits perfectly */
.sig-qr-live canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/******************************/
/* CARD */
.sig-card {
  width: 570px;
  height: 200px;
  background: #fff;
  border-radius: 6px;
  border: solid 1px var(--accent-soft);
  display: grid;
  grid-template-columns: 33% 67%;
  direction: ltr; /* קריטי */
  overflow: hidden;
}
/* בזמן צילום – בלי אנימציות */
.sig-card * {
  transition: none !important;
}
/* LEFT – QR */
.sig-col-qr {
  border-right: 1px dashed var(--accent-border);
  padding: 14px 10px;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sig-qr {
  width: 110px;
  height: 110px;
}

.sig-qr-label {
  font-size: 12px;
  color: #8C9AAF;
}

.sig-qr-pre {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #0A1A2F;
  direction: rtl;
  padding-right: 5px;
}

/* RIGHT – CONTENT */
.sig-col-content {
  padding: 16px 18px;
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sig-content-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}


.sig-content-inner {
  display: flex;
  gap: 16px;
  height: 100%;
}


/* ---------- AVATAR PREVIEW ---------- */
.sig-avatar-box{
  border: none;
  border-radius: 6px;
  background: transparent;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}
.sig-avatar-crop {
  width: 110px;
  height: 120px;
  border: 2px solid var(--accent-border);
  border-radius: 6px;
  overflow: hidden;
  background: #F7F9FB;
  position: relative;
}

.sig-avatar {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  display: block;
  object-fit: cover;
  object-position: 50% 30%;
}



#sig-image-stage{
  position: relative;
  overflow: hidden;
  background: #f5f7fa;
  border-radius: 14px;
}

/* התמונה בפופאפ: עוגן במרכז + שליטה ב-vars */
#sig-edit-image{
  position: absolute;
  top: 50%;
  left: 70%;
  transform-origin: center center;
  cursor: grab;
  will-change: transform;
  max-width: none;
  max-height: none;

  /* ברירות מחדל */
  --tx: 0px;
  --ty: 0px;
  --s: 0.8;

  transform:
    translate(-50%, -50%)
    translate(var(--tx), var(--ty))
    scale(var(--s));
}

/**** LOGO ****/

.sig-logo-wrap {
  width: 120px;
  height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
 object-fit: contain;
  overflow: hidden;
  background: transparent;
}

.sig-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  object-fit: contain;
  display: block;
}


/* ברירת מחדל: אווטאר ריבוע */
#sig-image-stage{
  width: 320px;
  aspect-ratio: 1 / 1;
}

/* מצב לוגו: רחב */
#sig-image-stage.is-logo{
  width: 320px;             /* תקטין/תגדיל פה */
  aspect-ratio: 3 / 1;      /* פריים רחב */
}

/**כפתורי רשתות****/
.soc{
  all: unset; /* מוחק עיצובי כפתור דיפולט */
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  user-select: none;

  transition:
    background-color .2s ease,
    box-shadow .2s ease,
    transform .12s ease,
    outline .12s ease;
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.sig-social-icons.error {
  animation: shake 0.25s ease-in-out 2;
}
.sig-social-input.error {
  border-color: #D66565;
}

.sig-social-icons.error {
  outline: 2px solid #FF5A5A;
  outline-offset: 8px;
  border-radius: 6px;
}

.sig-social-icons .soc{
  width: 44px;
  height: 44px;
  border-radius: 6px;

  background: var(--blue-night);
  color: var(--accent-soft);

  font-size: 22px;
  line-height: 1;
}
.sig-social-icons .soc:hover{
     background: #123A5F;
     color: #F7F9FB;
     transform: translateY(-1px) scale(0.97);
}

.sig-social-icons .soc:active{
  transform: translateY(-1px) scale(0.97);
}

.sig-social-icons .soc.active{
  outline: 2px solid #123A5F;
  outline-offset: 2px;
}

/* SOCIALS */
.sig-socials {
  display: flex;
  gap: 10px;            /* ⬅️ ריווח בין אייקונים */
  align-items: center;
  bottom: 0!important;
}


.sig-socials span {
  border: 1px solid #ccc;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 3px;
  margin-top: 10px;
}


.sig-socials .soc {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: solid 1px var(--accent-soft);
  background-color: var(--accent-soft);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;

  /* 🔥 זה הצבע של האייקון */
  filter: var(--icon-filter);

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

.sig-socials .soc:hover {
  transform: translateY(-1px);
  background-color: var(--accent-soft);
  border: solid 1px var(--accent-main);

}
/* ICONS */
.soc.in {
  background-image: url("https://isaacco.site/wp-content/uploads/2025/12/linkedin-1.png");
}

.soc.fb {
  background-image: url("https://isaacco.site/wp-content/uploads/2025/12/facebook-1.png");
}

.soc.ig {
  background-image: url("https://isaacco.site/wp-content/uploads/2025/12/instagram-1.png");
}

.soc.yt {
  background-image: url("https://isaacco.site/wp-content/uploads/2025/12/youtube-1.png");
}

.soc.web {
  background-image: url("https://isaacco.site/wp-content/uploads/2025/12/website-1.png");
}
/* =========================
   FIX html2canvas SVG COLOR
========================= */

.is-exporting .sig-socials .soc{
  /* מכריח צבע אמיתי, לא currentColor */
  color: #0A1A2F !important;
}

/* חשוב: SVG עם stroke=currentColor */
.is-exporting .sig-socials .soc{
  filter: none !important;
}

/* DETAILS */
.sig-details {
  margin-top: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* מרכז אנכית */
  align-items: flex-start;   /* צמוד לצד ימין ב־RTL */
  text-align: right;         /* טקסט לימין */
  gap: 8px;
}

.sig-name {
  font-weight: 700;
  font-size: 16px;
  color: #040E1B;
}

.sig-position {
  font-size: 14px;
  color: #4D4D4D;
  font-weight: 400;
}

.sig-company {
  font-size: 16px;
  color: #4D4D4D;
  font-weight: 400;
}

.sig-phone {
  font-weight: 600;
  font-size: 16px;
  direction: ltr!important;
  font-weight: 700;
  color: #040E1B;
}

.sig-email {
  font-weight: 400;
  direction: ltr!important;
  font-weight: 600;
  color: #4D4D4D;
  font-size: 14px;
}


/* FORM */
.sig-builder-form {
  width: 628px;
     direction: rtl;
    text-align: right;
    gap: 15px;
}
.sig-form-block {
  margin-bottom: 15px;
}
.sig-form-block h3 {
      margin-bottom: 12px;
    font-size: 16px;
    font-weight: 700;
}
.sig-form-block input {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px;
}
.sig-upload-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  margin: 0;
}


/*COLORS*/
.sig-form-color{
    padding: 15px 0 15px 0;
}
.sig-form-color h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--accent-strong);
}

.sig-colors {
  display: flex;
  align-items: center;   /* ← הצמדה לתחתית */
  gap: 15px;
  margin: 5px 0 35px 0!important;
  justify-content: space-between;
  padding: 5px 0 5px 0;
}

.sig-colors span {
  width: 32px;
  height: 32px;
  display: inline-block;
  border-radius: 6px;
  margin-right: 6px;
}



.sig-color-palette {
  display: flex;
  gap: 10px;
  align-items: center;
}

.color-swatch {
  width: 12px;
  height: 10px!important;
  border-radius: 1px!important;
  border: 1px solid var(--accent-border)!important;
  background: #ccc;
}


.sig-color-slider {
  display: flex;
  align-items: center;
  width: 100%;
}

.hue-slider {
  flex: 1;
  max-width: 290px;
  height: 16px;
  border-radius: 12px;
  appearance: none;
  background: linear-gradient(
    to left,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  cursor: pointer;
}


.hue-slider::-webkit-slider-thumb {
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin-top: -1px;
  /* GLASS CORE */
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.15)
    ),
    var(--accent-main);

  /* GLASS BORDER */
  border: 1px solid rgba(255,255,255,0.45);

  /* DEPTH */
  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);     /* עומק פנימי */

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  cursor: pointer;
}
.hue-slider:focus::-webkit-slider-thumb {
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.35),
    0 0 0 6px color-mix(in srgb, var(--accent-main) 40%, transparent),
    0 6px 14px rgba(0,0,0,0.22);
}
.hue-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.45);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.65),
      rgba(255,255,255,0.15)
    ),
    var(--accent-main);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.18),
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(0,0,0,0.15);
}


/** SEND BUTTON **/
.sig-submit {
  width: 50%;
  padding: 14px 18px;
  margin: 25px 0 25px 0 ;
  background: var(--accent-main);
  color: var(--accent-soft);
  align-self: center!important;
  border: solid 1px #123A5F;
  border-radius: 3px;

  font-size: 16px;
  font-weight: 700;
  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}
.sig-submit:hover {
  background: var(--accent-strong);
  color: #F7F9FB;
  border: solid 1px #3D6A90;
 transform: translateY(-1px);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.15);
}
.sig-submit:focus{
  outline: none;
  background: var(--accent-strong);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.6),
    0 0 0 6px color-mix(in srgb, #A8C4E8 35%, transparent),
    0 6px 16px rgba(0, 0, 0, 0.2);
}
.sig-submit:active {
 background: var(--accent-strong);
  color: #F7F9FB;

  transform: translateY(1px);
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.18);
}
.sig-submit:disabled {
  background: var(--accent-strong);
  color: rgba(0, 0, 0, 0.4);
  cursor: not-allowed;
  box-shadow: none;
}



.sig-clear{
  background: #ffffff;
  color: var(--blue-sky);
  border:none;
  padding: 14px 18px;
  margin: 25px 0 25px 0;
  border-radius: 3px;
}
.sig-clear:hover {
  background: #D66565;
  color: #F7F9FB;
  transform: translateY(-1px)!important;
}
.sig-clear:active {
  background: #D66565!important;
  color: #F7F9FB;
}
.sig-clear:focus{
  background: #D66565;
  color: #F7F9FB;
}
.sig-clear:disabled {
  background: #D66565;
  color: #F7F9FB;
}

.sig-builder-preview,
.sig-builder-form {
  width: 628px;
  flex-shrink: 0; /* ← מונע שינוי רוחב */
}
/************לוגו ואווטר**************************************/
/* =========================
   PREVIEW ACTIONS WRAPPER
========================= */
.sig-preview-actions {
  display: grid;
  
}

/* =========================
   UPLOAD BLOCK
========================= */
.sig-preview-actions .sig-form-block {
  background: #ffffff;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

.sig-preview-actions .sig-form-block h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #123A5F;
}

/* =============================
   UPLOAD ROW – STRUCTURE
============================= */
.sig-upload-row {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* =============================
   PREVIEW CONTAINER
============================= */
.sig-upload-preview {
  background: #f3f4f6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* AVATAR */
.sig-upload-preview.avatar {
  width: 75px;
  height: 75px;
  border-radius: 6px;
padding: 5px;
}

/* LOGO */
.sig-upload-preview.logo {
  width: 115px;
  height: 75px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 5px;
}

/* IMAGE */
.sig-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =============================
   BUTTON
============================= */
.sig-upload-btn {
  padding: 8px 12px;
  border-radius: 3px!important;
  border: solid 1px #3D6A90;
  background: var(--blue-night);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all .25s ease;
  margin-left: 10px;
}

.sig-upload-btn:hover {
  background: #123A5F;
  border: solid 1px #123A5F;
  transform: translateY(-1px);
}

.sig-upload-row button:active {
  transform: translateY(0);
}
.sig-upload-row:focus{
  background: #D66565!important;
  color: var(--accent-soft)!important;
}
/***************עיצוב טופס**********************/
/* === FORM BLOCK === */
.sig-form-personal {
  background: #fff;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
}

/* HEADER */
.sig-form-header {
  margin: 5px 0 25px 0;
}
.sig-form-header .title-view {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-main);
  margin: 15px 0 15px 0;
}
.sig-form-header h3 {
    color: #151616;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.sig-form-header p {
  color: #123A5F;
  margin: 4px 0 0;
  font-size: 13px;
  
}

/* GRID */
.sig-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}



/* FIELD */

.sig-field {
  position: relative;
  margin-bottom: 8px;
}

/* INPUT */
.sig-field input {
    direction: rtl;
  width: 100%;
  height: 56px;
  padding: 12px 24px 12px;
  border-radius: 10px!important;
  border: 1px solid #8C9AAF;
  background: #fff;
  font-size: 15px;
  color: #151616;
  outline: none;
  transition: border-color .2s ease;
}

/* LABEL ברירת מחדל */
.sig-field label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #151616;
  background: #fff;
  padding: 0 6px;
  pointer-events: none;
  transition: top .2s ease, font-size .2s ease, color .2s ease;
}


/* פוקוס אמיתי בלבד */
.sig-field:focus-within label {
  top: -2px;
  font-size: 13px;
  color: #526174;
}

/* ערך קיים (אחרי הקלדה בלבד) */
.sig-field.has-value label {
  top: -4px;
  font-size: 13px;
  color: #526174!important;
}

/* פוקוס */
.sig-field input:hover {
  border-color: #3D6A90!important;
  }

.sig-field input:focus {
  border-color: #3D6A90!important;
  border-radius: 8px!important;
}

/* 🧠 הקסם: פוקוס או שיש ערך */
.sig-field input:focus + label,
.sig-field input:not(:placeholder-shown) + label {
  top: -4px;
  font-size: 13px;
  color: #3D6A90!important;
}





/****רשתות*****/
.sig-social-editor{
  background: #fff;
  border-radius: 6px;
  padding:25px 15px 25px 15px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  gap: 25px;
  margin: 25px 0 0;
}

.sig-social-icons {
  display: flex;
  gap: 15px;
  -bottom: 15px;
}


.sig-social-input-row {
    margin: 25px 0 25px 0;
  display: flex;
  gap: 15px;
}
/*******שדה של רשתות החברתיות*********/
.sig-social-input {
  flex: 1;
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid  #151616;
  background: #F7F9FB;
  color: #526174;
  font-size: 15px;
  line-height: 1.4;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}
.sig-social-input:hover {
  border-color: #3D6A90;
}
.sig-social-input:focus {
  outline: none;
  border-color: #3D6A90;
  box-shadow: 0 0 0 3px #E3E7EE;
  background: #F7F9FB;
}
.sig-social-input:not(:placeholder-shown) {
  border-color: #3D6A90;
}
.sig-social-input:not(:placeholder-shown):focus {
  border-color: #3D6A90;
}
.sig-social-input:disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  border-color: #E5E7EB;
  cursor: not-allowed;
}
/*********************/
/* =========================
   FORCE BUTTON RESET + STYLE
   (Elementor/Theme override killer)
========================= */
.sig-social-editor .sig-social-input-row .sig-social-btn{
  -webkit-appearance: none;
  appearance: none;
  background: #F7F9FB !important;
  background-image: none !important;
  color: #151616 !important;
  border: 1px solid #151616 !important;
  border-radius: 6px !important;

  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  cursor: pointer !important;
  user-select: none !important;

  box-shadow: none !important;
  text-decoration: none !important;

  transition:
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .12s ease,
    border-color .2s ease !important;
}

.sig-social-editor .sig-social-input-row .sig-social-btn:hover{
  background: #E3E7EE !important;
  color: #123A5F !important;
  border-color: #123A5F !important;
}

.sig-social-editor .sig-social-input-row .sig-social-btn:active{
  transform: translateY(1px) !important;
  background: rgba(255, 90, 90, 0.14) !important;
  color: #123A5F !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.08) !important;
}

.sig-social-editor .sig-social-input-row .sig-social-btn:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.25) !important;
}

.sig-social-editor .sig-social-input-row .sig-social-btn:disabled{
  opacity: .45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* PRIMARY */
.sig-social-editor .sig-social-input-row .sig-social-btn.is-primary{
  background: #3D6A90 !important;
  color: #F7F9FB !important;
  border: none !important;
}
.sig-social-editor .sig-social-input-row .sig-social-btn.is-primary:hover{
  background: #123A5F !important;
  color: #E3E7EE !important;
}
.sig-social-editor .sig-social-input-row .sig-social-btn.is-primary:active{
  background: #123A5F !important;
  color: #E3E7EE !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.18) !important;
}


.sig-social-action {
  width: 48px;
  border-radius: 6px;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.sig-social-action.add { background:#ff5a5a; color:#fff; }
.sig-social-action.remove { background:#e5e7eb; }

.sig-social-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
  justify-content: flex-start;
}

/* ===== SOCIAL CHIP ===== */
.sig-chip {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #E3E7EE;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.sig-chip .chip-icon {
  width: 20px;
  height: 20px;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* כפתור מינוס */
.sig-chip .chip-remove {
  position: absolute;
  top: -8px;
  left: -8px;
  padding: 3px!important;
  width: 15px!important;
  height: 15px!important;
  border-radius: 50%;

  background: #e5e7eb;
  color: #0A1A2F;

  display: flex;
  align-items: center;
  justify-content: center;

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

  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.sig-chip .chip-remove:hover {
  background: #D66565;
  color: #F7F9FB;
}

/* אייקון רשת */
.sig-chip .chip-icon {
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #123A5F;
}

/* ===== ICON MAP ===== */
.sig-chip .chip-icon.whatsapp {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M21 11.5a8.38 8.38 0 01-1.9 5.4L21 21l-4.2-1.1a8.38 8.38 0 01-5.4 1.9 8.5 8.5 0 118.5-8.5z'/>\
<path d='M8.5 9.5c.3-.6.6-.6.9-.6h.6c.3 0 .6.1.7.4.2.5.6 1.5.6 1.6 0 .2 0 .3-.1.4l-.3.4c-.1.1-.2.3-.1.4.1.2.6 1.1 1.4 1.8.9.8 1.7 1 1.9 1.1.2 0 .3 0 .4-.1l.5-.6c.1-.2.3-.2.5-.1l1.6.8c.2.1.4.2.4.4 0 .2 0 .7-.2 1-.3.4-.9.8-1.5.8-.3 0-.7 0-1.6-.4a13 13 0 01-4.5-3.9c-1.1-1.5-1.6-2.8-1.6-3.8 0-1 .5-1.5.8-1.8z'/>\
</svg>");
}


.sig-chip .chip-icon.linkedin {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
<path d='M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6z'/>\
<rect x='2' y='9' width='4' height='12'/>\
<circle cx='4' cy='4' r='2'/>\
</svg>");
}



.sig-chip .chip-icon.facebook {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2'>\
<path d='M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z'/>\
</svg>");
}


.sig-chip .chip-icon.instagram {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2'>\
<rect x='2' y='2' width='20' height='20' rx='5' ry='5'/>\
<circle cx='12' cy='12' r='4'/>\
<circle cx='18' cy='6' r='1'/>\
</svg>");
}


.sig-chip .chip-icon.youtube {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2'>\
<polygon points='5 3 19 12 5 21 5 3'/>\
</svg>");
}


.sig-chip .chip-icon.website {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1A2F' stroke-width='2'>\
<circle cx='12' cy='12' r='10'/>\
<line x1='2' y1='12' x2='22' y2='12'/>\
<path d='M12 2a15 15 0 010 20'/>\
<path d='M12 2a15 15 0 000 20'/>\
</svg>");
}

/* =========================
   OUTPUT CONTAINER
========================= */
.sig-output{
  width: 100%;
  position: relative;
  border: 1px solid #3D6A90;
  border-radius: 6px;
  padding: 15px;
  background: #F7F9FB;
  direction: rtl;
}

/* =========================
   SHARE (LEFT / TOP)
========================= */
/* ===== SHARE WRAPPER ===== */
.sig-share{
  position: absolute;
  bottom: 14px!important;
  left: 15px;
  z-index: 10;
}

.sig-save-bar{
    width: 100%;
 font-size: 18px;
  font-weight: 400;
  color: #151616;
  padding-bottom: 25px;
  }


/* ===== DROPDOWN ===== */
.share-dropdown{
  position: absolute;
  top: 50%;
  left: 100%;                 /* מתחיל מימין לכפתור */
  transform: translate(10px, -50%) scale(0.96);

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;

  padding: 8px 10px;
  background: #f1f5f9;
  border-radius: 999px;

  opacity: 0;
  pointer-events: none;
  transition:
    opacity .18s ease,
    transform .18s ease;
}

/* פתוח */
.sig-share.open .share-dropdown{
  opacity: 1;
  pointer-events: auto;
  transform: translate(16px, -50%) scale(1);
}


/* =========================
   SHARE ICONS – HARD FIX
========================= */

/* צבע אחד לכל האייקונים */
.sig-share { --share-ico: #111827; } /* תחליף למה שבא לך */

.sig-share i{
  color: var(--share-ico);
  font-size: 20px;       /* גודל אחיד */
  line-height: 1;
  display: block;
}

/* כל אייקון */
.share-item{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:1px solid #e5e7eb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent-main);
}

/* =========================
   SHARE TOGGLE BUTTON
========================= */

.share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #3D6A90;
  background: #F7F9FB;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  color: #123A5F!important; /* צבע אייקון */

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease,
    color 0.18s ease;
}

/* אייקון */
.share-btn i {
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  color: #123A5F!important; 
}

/* =========================
   HOVER
========================= */
.share-btn:hover {
  background:#E3E7EE!important;
  border-color: #123A5F!important;
  color: #123A5F !important;
}

/* =========================
   FOCUS (נגיש, לא צעקני)
========================= */

.share-btn:focus {
  background: #E3E7EE!important;
  border-color: #123A5F!important;
  color: #123A5F!important;
}
/* =========================
   ACTIVE (לחיצה)
========================= */
.share-btn:active {
  background: #E3E7EE!important;
  border-color: #123A5F!important;
  color: #123A5F!important;
}

/* =========================
   OPEN STATE (תפריט פתוח)
========================= */
.sig-share.open .share-btn {
 background: #E3E7EE!important;
  border-color: #123A5F!important;
  color: #123A5F!important;
}

/* =========================
   DISABLED (אם תרצה)
========================= */
.share-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}


/* =========================
   MAIN BAR LAYOUT
========================= */
.sig-output-bar{
  direction: rtl;
  display: flex;
  justify-content: flex-start; /* הכל נצמד לימין */
  align-items: flex-start;
  gap: 16px;
  bottom: 0;
}

/* =========================
   QR ACTIONS (RIGHT)
========================= */
.sig-qr-actions{
  display: flex;
  gap: 25px;
}

.qr-btn{
  padding: 8px 12px;
  border-radius: 3px!important;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all .25s ease;
}

.qr-btn.primary{
  background: #3D6A90;
  color: #F7F9FB;
  border: none;
}
.qr-btn.primary:hover {
  background: #123A5F;
  color: #E3E7EE;
  transform: translateY(-1px);
}


.qr-btn.secondary{
 background: #3D6A90;
  color: #F7F9FB;
 border: none;  
}
.qr-btn.secondary:hover {
  background: #123A5F;
  color: #E3E7EE;
  transform: translateY(-1px);
}




/* =========================
   DOWNLOAD BUTTON
========================= */

.sig-download{
  display: flex;
  align-items: center;
}

/* כפתור הורדה */
.icon-btn.download{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #3D6A90;
  background: #F7F9FB;
  margin-right: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  color: #123A5F; /* צבע אייקון */

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease,
    color 0.18s ease;
}

/* אייקון */
.icon-btn.download i{
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

/* =========================
   HOVER
========================= */
.icon-btn.download:hover{
  background: #E3E7EE!important;
  border-color: #123A5F!important;
  color: #123A5F!important;
}

/* =========================
   FOCUS (נגיש)
========================= */
.icon-btn.download:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

/* =========================
   ACTIVE
========================= */
.icon-btn.download:active{
  transform: scale(0.96);
  background: #eef2ff;
  border-color: #1e40af;
  color: #1e3a8a;
}

/* =========================
   DISABLED (אם תשתמש)
========================= */
.icon-btn.download:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.s-title{
    font-size: 14px;
    line-height: 1;
    color: #151616;
    padding: 25px 0 0 0;
    margin-top: 5px;
}

.sig-view-card {
  display: flex;
  align-items: center;
  margin-right: 12px;
}

.view-card-link {
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--accent-strong);
  transition: opacity .2s ease;
  
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--accent-soft);
}

.view-card-link:hover {
  opacity: .85;
}