/* ==========================================================================
   IWorld — Invitation editor (scoped `.invitation-canvas-*`, `.editor-*`)
   Layout: left rail (templates + layers) | centre canvas | right properties
   ========================================================================== */

body.editor-body { overflow: hidden; }

.editor-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 320px;
  height: calc(100vh - var(--iw-header-h));
  background: #eeeaea;
}

/* ------------------------------------------------------------------ rails -- */
.editor-rail {
  background: #fff;
  border-right: 1px solid var(--iw-line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.editor-panel {
  border-right: 0;
  border-left: 1px solid var(--iw-line);
  background: #fff;
  overflow-y: auto;
}

.editor-rail__section { padding: var(--sp-4); border-bottom: 1px solid var(--iw-line-2); }

.editor-rail__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--iw-ink-3);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Template switcher thumbnails */
.editor-template-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}

.editor-template-thumb {
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  padding: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color .15s ease, transform .15s ease;
}

.editor-template-thumb:hover { transform: translateY(-2px); border-color: #d9ccd2; }
.editor-template-thumb.is-active { border-color: var(--iw-plum); }

.editor-template-thumb .inv-frame { pointer-events: none; }

.editor-template-thumb__name {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  color: var(--iw-ink-2);
  padding: 4px 2px 5px;
  text-align: center;
  line-height: 1.25;
}

/* Layers list */
.editor-layers { display: flex; flex-direction: column; gap: 2px; }

.editor-layer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: .85rem;
  color: var(--iw-ink-2);
}

.editor-layer:hover { background: var(--iw-line-2); }

.editor-layer.is-active {
  background: var(--iw-plum-soft);
  border-color: #e3d0d9;
  color: var(--iw-plum);
  font-weight: 600;
}

.editor-layer__icon { width: 16px; text-align: center; opacity: .7; font-size: .78rem; }

.editor-layer__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-layer__role {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--iw-ink-3);
  font-weight: 600;
}

/* ----------------------------------------------------------------- canvas -- */
.editor-stage {
  position: relative;
  overflow: auto;
  display: grid;
  place-items: start center;
  padding: var(--sp-5);
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(160deg, #f1eeee, #e6e1e1);
}

.editor-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border: 1px solid var(--iw-line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
}

.editor-toolbar__name {
  font-weight: 600;
  font-size: .9rem;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  min-width: 120px;
  max-width: 220px;
  font-family: inherit;
  color: var(--iw-ink);
}

.editor-toolbar__name:hover { border-color: var(--iw-line); }
.editor-toolbar__name:focus { outline: none; border-color: var(--iw-plum); background: #fff; }

.editor-toolbar__sep { width: 1px; height: 22px; background: var(--iw-line); }

.editor-toolbar__spacer { flex: 1; }

.editor-zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: .8rem;
  color: var(--iw-ink-2);
  font-weight: 600;
}

.editor-zoom button {
  width: 28px; height: 28px;
  border: 1px solid var(--iw-line);
  background: #fff;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--iw-ink-2);
}

.editor-zoom button:hover { border-color: var(--iw-ink-3); }
.editor-zoom output { min-width: 46px; text-align: center; }

/* The canvas card itself */
.invitation-canvas-wrap {
  position: relative;
  width: 100%;
  max-width: var(--canvas-w, 560px);
  transition: max-width .18s ease;
  margin-bottom: var(--sp-6);
}

.invitation-canvas {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 20px 50px rgba(29, 26, 28, .26);
  user-select: none;
  touch-action: pan-y;
}

/* Interactive elements on the canvas */
.invitation-canvas .inv-el.is-interactive,
.invitation-canvas .inv-img.is-selected {
  touch-action: none; /* a selected element can be dragged freely */
}
.invitation-canvas .inv-img {
  cursor: move;
  outline: 1px dashed transparent;
  outline-offset: 3px;
  transition: outline-color .12s ease, background-color .12s ease;
}

.invitation-canvas .inv-el.is-interactive:hover,
.invitation-canvas .inv-img:hover { outline-color: rgba(109, 44, 79, .5); }

.invitation-canvas .is-selected {
  outline: 1.5px solid var(--iw-plum) !important;
  outline-offset: 3px;
}

.invitation-canvas .inv-el[contenteditable="true"] {
  cursor: text;
  outline: 1.5px solid var(--iw-plum) !important;
  background: rgba(255, 255, 255, .35);
}

/* Selection handles */
.invitation-canvas-handle {
  position: absolute;
  z-index: 60;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--iw-plum);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  display: none;
}

.invitation-canvas-handle.is-visible { display: block; }
.invitation-canvas-handle--w { cursor: ew-resize; }
.invitation-canvas-handle--e { cursor: ew-resize; }

.invitation-canvas-hint {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  font-size: .78rem;
  color: var(--iw-ink-3);
  white-space: nowrap;
}

/* --------------------------------------------------------- properties panel -- */
.editor-panel__head {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--iw-line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 5;
}

.editor-panel__head h2 { font-size: 1.05rem; margin: 0; }
.editor-panel__head p { margin: 4px 0 0; font-size: .8rem; color: var(--iw-ink-3); }

.editor-tabs {
  display: flex;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4) 0;
  border-bottom: 1px solid var(--iw-line);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 6;
}

.editor-tab {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--iw-ink-3);
  cursor: pointer;
}

.editor-tab.is-active { color: var(--iw-plum); border-bottom-color: var(--iw-plum); }

.editor-tabpanel { padding: var(--sp-4); }
.editor-tabpanel[hidden] { display: none; }

.editor-group { margin-bottom: var(--sp-5); }

.editor-group__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--iw-ink-3);
  margin: 0 0 var(--sp-3);
}

.editor-row { display: flex; gap: var(--sp-2); }
.editor-row > * { flex: 1; min-width: 0; }

.editor-inline-label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--iw-ink-3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.editor-field { margin-bottom: var(--sp-3); }

.editor-field input[type="text"],
.editor-field input[type="number"],
.editor-field select,
.editor-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--iw-line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  background: #fff;
  color: var(--iw-ink);
}

.editor-field textarea { min-height: 66px; resize: vertical; line-height: 1.5; }

.editor-field input:focus,
.editor-field select:focus,
.editor-field textarea:focus {
  outline: none;
  border-color: var(--iw-plum);
  box-shadow: 0 0 0 3px rgba(109, 44, 79, .1);
}

.editor-field input[type="range"] { width: 100%; accent-color: var(--iw-plum); padding: 0; }

.editor-color {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.editor-color input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--iw-line);
  border-radius: var(--r-sm);
  background: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

.editor-swatches { display: flex; flex-wrap: wrap; gap: 6px; }

.editor-swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .15);
  cursor: pointer;
  padding: 0;
}

.editor-swatch:hover { transform: scale(1.1); }

/* Segmented button group (alignment etc.) */
.editor-seg {
  display: flex;
  border: 1px solid var(--iw-line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.editor-seg button {
  flex: 1;
  padding: 8px 4px;
  border: 0;
  border-right: 1px solid var(--iw-line);
  background: #fff;
  cursor: pointer;
  color: var(--iw-ink-2);
  font-size: .82rem;
}

.editor-seg button:last-child { border-right: 0; }
.editor-seg button:hover { background: var(--iw-line-2); }
.editor-seg button.is-active { background: var(--iw-plum); color: #fff; }

.editor-empty-note {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--iw-ink-3);
  font-size: .875rem;
  background: var(--iw-cream);
  border: 1px dashed var(--iw-line);
  border-radius: var(--r-md);
}

.editor-empty-note i { display: block; font-size: 1.5rem; margin-bottom: var(--sp-2); opacity: .6; }

/* Mobile panel switcher */
.editor-mobile-tabs { display: none; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  .editor-shell { grid-template-columns: 220px minmax(0, 1fr) 290px; }
}

@media (max-width: 980px) {
  body.editor-body { overflow: auto; }

  .editor-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .editor-rail, .editor-panel {
    border: 0;
    border-top: 1px solid var(--iw-line);
    max-height: none;
    overflow: visible;
  }

  /* Canvas first on small screens */
  .editor-stage { order: -1; padding: var(--sp-4) var(--sp-3); }
  .invitation-canvas-wrap { max-width: min(100%, 420px); }

  .editor-mobile-tabs {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3);
    background: #fff;
    border-top: 1px solid var(--iw-line);
    position: sticky;
    bottom: 0;
    z-index: 40;
    box-shadow: 0 -4px 14px rgba(0, 0, 0, .06);
  }

  .editor-mobile-tabs button {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--iw-line);
    border-radius: var(--r-pill);
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    color: var(--iw-ink-2);
    cursor: pointer;
  }

  .editor-mobile-tabs button.is-active {
    background: var(--iw-plum);
    border-color: var(--iw-plum);
    color: #fff;
  }

  .editor-rail.is-hidden-mobile, .editor-panel.is-hidden-mobile { display: none; }

  .editor-template-list { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 560px) {
  .editor-toolbar { border-radius: var(--r-md); }
  .editor-toolbar__name { min-width: 90px; }
  .editor-template-list { grid-template-columns: repeat(3, 1fr); }
  .invitation-canvas-hint { display: none; }
}

@media print {
  .editor-rail, .editor-panel, .editor-toolbar, .editor-mobile-tabs { display: none !important; }
  .editor-shell { display: block; height: auto; }
  .editor-stage { background: none; padding: 0; }
  .invitation-canvas { box-shadow: none; }
}

/* ------------------------------------------------------- share modal ---- */
.share-dialog {
  position: relative;
  width: min(480px, 100%);
  background: var(--iw-white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  padding: var(--sp-6);
}

.share-modal-close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 4;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--iw-cream);
  color: var(--iw-ink);
  cursor: pointer;
  box-shadow: var(--sh-1);
}

#share-whatsapp-btn { color: #17795e; border-color: #bfe5d8; }
#share-whatsapp-btn:hover { background: #e6f4ef; }