/* Editor: split view — scrollable form on the left, live preview on the right. */
.editor-body { height: calc(100vh - 65px); display: flex; overflow: hidden; }

.form-panel {
  width: min(460px, 46vw);
  flex-shrink: 0;
  overflow-y: auto;
  padding: 22px clamp(16px, 2vw, 26px) 120px;
  border-right: 1px solid var(--line);
  background: #fff;
}
.preview-panel { flex: 1; position: relative; background: var(--rose-3); }
.preview-panel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Close-preview (X) and reopen button are mobile-only; hidden on desktop where
   the split view is always visible. */
.preview-close, .preview-open { display: none; }

/* ---- page pager (click through the card's pages) ---- */
.page-nav {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 6; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 999px;
  background: rgba(30,18,22,0.62); backdrop-filter: blur(8px);
  box-shadow: 0 6px 22px rgba(20,10,14,0.32); max-width: calc(100% - 24px);
}
.page-nav[hidden] { display: none; }
.page-nav-arrow {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 2px;
  transition: background .15s, opacity .15s;
}
.page-nav-arrow:hover { background: rgba(255,255,255,0.24); }
.page-nav-arrow:disabled { opacity: 0.35; cursor: default; }
.page-nav-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 84px; }
.page-nav-label {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.page-nav-dots { display: flex; gap: 6px; }
.page-nav-dots .dot {
  width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
  border: none; background: rgba(255,255,255,0.4); transition: background .15s, transform .15s;
}
.page-nav-dots .dot.on { background: var(--gold-soft, #cfa878); transform: scale(1.25); }

/* ---- card-type badge ---- */
.type-badge {
  display: inline-block; margin: 0 0 6px; padding: 4px 12px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: #fbf6ef; border: 1px solid var(--gold);
  border-radius: 999px;
}

/* ---- form sections ---- */
.section { border-bottom: 1px solid var(--line); padding: 18px 0; }
.section:first-child { padding-top: 4px; }
.section > h3 {
  font-family: var(--serif); font-weight: 500; font-size: 19px; color: var(--rose-2);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.hint { font-size: 12px; color: var(--ink-soft); margin: -6px 0 12px; }

.row { margin-bottom: 13px; }
.row > label { display: block; font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-soft); margin-bottom: 5px; }
.row input[type=text], .row input[type=number], .row input[type=email], .row input[type=tel], .row input[type=url], .row textarea, .row select {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.row textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.row input:focus, .row textarea:focus, .row select:focus { outline: none; border-color: var(--gold); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- checkable chips (languages) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px;
  color: var(--ink); background: #fff; transition: border-color .15s, background .15s;
}
.chip input { accent-color: var(--rose-2); }
.chip.on { border-color: var(--gold); background: #fbf6ef; }

/* ---- auto-translate button + progress ---- */
.tr-btn { width: 100%; margin: 4px 0 14px; border-color: var(--gold); color: var(--gold); }
.tr-btn:hover { background: var(--gold); color: #fff; }
.tr-progress { margin: 4px 0 14px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbf7f1; }
.tr-progress-title { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.tr-bar { height: 8px; background: var(--cream-2); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.tr-bar-fill { height: 100%; width: 0; background: var(--gold); transition: width .35s ease; }
.tr-lang-list { display: flex; flex-direction: column; gap: 5px; }
.tr-lang-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.tr-lang-name { color: var(--ink); }
.tr-lang-status { color: var(--ink-soft); font-weight: 600; min-width: 16px; text-align: right; }
.tr-lang-status.ok { color: #4f7d52; }
.tr-lang-status.fail { color: #b3444d; }

/* ---- language tabs for texts ---- */
.lang-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.lang-tab {
  font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
}
.lang-tab.active { background: var(--rose-2); color: #fff; border-color: var(--rose-2); }
.default-flag { font-size: 11px; color: var(--gold); margin-left: 4px; }

/* ---- symbol picker ---- */
.symbol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.symbol-opt {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 12px;
  background: var(--rose-2); color: #fff; transition: outline .12s, transform .12s;
}
.symbol-opt:hover { transform: translateY(-1px); }
.symbol-opt svg { width: 100%; height: 100%; }
/* the image symbol is wrapped in <picture> (WebP + PNG fallback); size the
   wrapper like the tile so the img's max-height has a definite reference */
.symbol-opt picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.symbol-opt img.symbol-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.symbol-opt.sel { outline: 3px solid var(--gold); outline-offset: 1px; }

/* ---- front type toggle ---- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 12px; }
.seg button {
  font-family: var(--sans); font-size: 13px; padding: 8px 14px; background: #fff;
  border: none; border-right: 1px solid var(--line); cursor: pointer; color: var(--ink-soft);
}
.seg button:last-child { border-right: none; }
.seg button.on { background: var(--rose-2); color: #fff; }

/* ---- colour presets ---- */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.swatch.sel { box-shadow: 0 0 0 2px var(--gold); }
.color-inline { display: flex; align-items: center; gap: 10px; }
.color-inline input[type=color] { width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }

/* ---- photos + phones lists ---- */
.item-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.item-head strong { font-size: 13px; color: var(--ink); font-weight: 500; }
.mini-link { background: none; border: none; color: #a3474f; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.thumb { width: 100%; aspect-ratio: 4/5; max-width: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: var(--cream); }
.upload-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* front-photo focal-point picker */
.focus-box {
  position: relative; width: 100%; max-width: 240px; aspect-ratio: 4/3;
  border-radius: 10px; overflow: hidden; cursor: crosshair; touch-action: none;
  border: 1px solid var(--line); background: var(--cream);
}
.focus-box--circle { aspect-ratio: 1/1; max-width: 200px; }
.focus-img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.focus-dot {
  position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid #fff; background: rgba(181,138,90,0.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35); pointer-events: none;
}

.toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.toggle-row input { width: 18px; height: 18px; accent-color: var(--rose-2); }

/* ---- sticky save bar ---- */
.save-bar {
  position: fixed; bottom: 0; left: 0; width: min(460px, 46vw);
  background: #fff; border-top: 1px solid var(--line); border-right: 1px solid var(--line);
  padding: 12px clamp(16px, 2vw, 26px); display: flex; align-items: center; gap: 12px; z-index: 5;
}
.save-bar .btn-primary { width: auto; flex: 1; }
.save-state { font-size: 12.5px; color: var(--ink-soft); min-width: 90px; }
.save-state.dirty { color: var(--gold); }
.save-state.saved { color: #4f7d52; }

@media (max-width: 860px) {
  .editor-body { flex-direction: column; height: auto; overflow: visible; }
  .form-panel { width: 100%; border-right: none; order: 2; padding: 20px 16px 150px; }
  /* Live preview takes the top 2/5 of the screen — enough to see what you're
     editing and page through it, while leaving room for the form below.
     flex:none is REQUIRED — the desktop `flex:1` sets flex-basis:0% which would
     otherwise override the height and collapse the panel in this column layout. */
  .preview-panel { order: 1; flex: none; height: 40vh; position: sticky; top: 0; z-index: 4; border-bottom: 1px solid var(--line); }
  .save-bar { width: 100%; border-right: none; }
  .symbol-grid { grid-template-columns: repeat(4, 1fr); }

  /* Close (X) sits top-right over the preview; tapping it collapses the preview
     so the form gets the full screen. A floating button reopens it. */
  .preview-close {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px; z-index: 7;
    width: 34px; height: 34px; border-radius: 50%; padding: 0;
    border: 1px solid rgba(255,255,255,0.25); background: rgba(30,18,22,0.62);
    backdrop-filter: blur(8px); color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20,10,14,0.32);
  }
  .editor-body.preview-collapsed .preview-panel { display: none; }

  .preview-open {
    display: inline-flex; align-items: center; gap: 7px;
    position: fixed; right: 14px; bottom: 76px; z-index: 8;
    padding: 11px 18px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--rose-2); color: #fff; font-family: var(--sans); font-size: 14px;
    box-shadow: 0 6px 20px rgba(20,10,14,0.32);
  }
  .preview-open::before { content: "👁"; font-size: 15px; }
  .preview-open[hidden] { display: none; }
}

/* phones: stack paired fields, and use 16px inputs so iOS Safari doesn't zoom
   in on focus. Preview keeps the 40vh (2/5) height from the block above. */
@media (max-width: 560px) {
  .page-nav { bottom: 10px; gap: 8px; padding: 5px 7px; }
  .page-nav-arrow { width: 32px; height: 32px; }
  .two-col { grid-template-columns: 1fr; }
  .symbol-grid { grid-template-columns: repeat(3, 1fr); }
  .row input[type=text], .row input[type=number], .row input[type=email], .row input[type=tel], .row input[type=url], .row textarea, .row select {
    font-size: 16px; padding: 11px 12px;
  }
  .section > h3 { font-size: 18px; }
  .save-bar { padding: 10px 14px; gap: 10px; }
  .save-state { min-width: 0; }
}