/* Live preview container (hidden until JS marks it ready) */
.emb-preview { display: none; margin: 16px 0; }
.emb-preview.is-ready { display: block; }

/* Stage holding the template image + overlay layers */
.emb-preview__stage {
  position: relative;
  width: 100%;
  max-width: 520px;       /* tweak if you want it larger/smaller */
  aspect-ratio: 1 / 1;    /* templates are square; keeps layout stable */
  margin: 0 auto;
}

/* The template image */
.emb-preview__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
}

/* Absolute overlay layer container */
.emb-preview__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* clicks go through */
}

/* A single text layer (we'll create one per slot in JS) */
.emb-layer {
  position: absolute;
  left:  calc(var(--x, 0) * 1%);
  top:   calc(var(--y, 0) * 1%);
  width: calc(var(--w, 100) * 1%);

  color:          var(--color, #111);
  text-align:     var(--align, left);
  font-family:    var(--font, inherit);
  font-size:      calc(var(--size) * 1px * var(--scale));
  line-height:    var(--lh, 1.2);
  letter-spacing: var(--ls, normal);
  text-transform: var(--tt, none);
  font-weight: var(--fw, 400);
  font-style: var(--fst, normal);


  white-space: normal;
  word-break: break-word;

  transform: rotate(var(--rot, 0deg));
  transform-origin: top left;

}

/* Modal (no nav, simple center) */
.emb-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  z-index: 9999;
}
.emb-modal.is-open { display: flex; }
.emb-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.emb-modal__close {
  position: absolute;
  top: 6px; right: 8px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer!important;
  z-index: 1;
}

/* Stage sizing in modal: square up to 800px, responsive */
.emb-preview__stage--modal {
  width: min(90vmin, 800px);
  aspect-ratio: 1 / 1;
}

/* On-page stage can be whatever you already have; this keeps images fitting */
.emb-preview__image { width: 100%; height: 100%; object-fit: contain; }

.emb-preview__actions{
  display: block;
  clear: both;        /* stop any earlier floats */
  margin: 10px 0 14px;
}

/* Kill theme floats on this specific button */
.emb-preview__actions .button{
  float: none !important;
  margin: 0;
  display: inline-block; /* keep normal button sizing */
}

/* Preview button row: hidden by default; becomes visible with .is-visible */
.emb-preview__actions{
  display:none;          /* hidden on load */
  clear:both;            /* defeat theme floats */
  margin:10px 0 14px;
}
.emb-preview__actions.is-visible{
  display:block;         /* shown when template selected */
}

/* Disabled button state is obvious */
.emb-preview__actions .button[disabled]{
  opacity:0.6;
  cursor:not-allowed;
}


/* Straight text box background (live preview + modal) */
.emb-preview__layers .emb-layer { background-color: var(--bg, transparent); }
.emb-modal [data-emb-layers-modal] .emb-layer { background-color: var(--bg, transparent); }

.emb-preview__disclaimer{
  margin: 12px 16px 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  color: #666;
  text-align: center;
}