/* ============================================================
   Native-SVG Design Studio — stage, toolbar, panels, selection
   Isolated from admin-design-studio.css (which we link for the
   shared panel look). Variables fall back to the admin theme.
   ============================================================ */

:root {
  --ic-accent: var(--accent, #6744DA);
  --ic-border: var(--border, rgba(255,255,255,.12));
  --ic-card: var(--bg-card, rgba(255,255,255,.04));
  --ic-text: var(--text-primary, #fff);
  --ic-muted: var(--text-muted, #8a8aa0);
}

/* Properties panel shows only when something is selected (classic uses .visible). */
.pd-img-resize { display: none; }
.pd-img-resize.visible { display: block; }

.ic-engine-tag {
  margin-left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  color: #c9bff5; background: rgba(103,68,218,.18); border: 1px solid rgba(103,68,218,.4);
}

/* Layout (grid + scrolling right column) is governed by admin-design-studio.css —
   we deliberately do NOT override .pd-editor-layout / -left / -right so the panels
   scroll and pad exactly like the classic studio. */

/* ---- Toolbar ---- */
.ic-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ic-toolbar-spacer { flex: 1 1 auto; }
.ic-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ic-text);
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--ic-border); background: var(--ic-card);
  transition: border-color .15s, background .15s, opacity .15s;
}
.ic-btn:hover { border-color: var(--ic-accent); }
.ic-btn svg { width: 16px; height: 16px; }
.ic-btn-primary { background: var(--ic-accent); border-color: var(--ic-accent); color: #fff; }
.ic-btn-primary:hover { filter: brightness(1.08); }
.ic-btn-icon { padding: 8px; }
.ic-btn-danger { color: #ff6b6b; border-color: rgba(255,107,107,.35); }
.ic-btn-danger:hover { background: rgba(255,107,107,.12); border-color: rgba(255,107,107,.6); }
.ic-btn:disabled { opacity: .4; cursor: default; }
.ic-btn input[type=file] { display: none; }

/* ---- Front / Back sides ---- */
.ic-sides { display: inline-flex; border: 1px solid var(--ic-border); border-radius: 9px; overflow: hidden; }
.ic-side { font: inherit; font-size: 13px; font-weight: 600; color: var(--ic-muted); cursor: pointer;
  background: transparent; border: 0; padding: 8px 16px; }
.ic-side:hover { color: var(--ic-text); }
.ic-side.active { color: #fff; background: var(--ic-accent); }

/* ---- Print setup bar ---- */
.ic-setup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--ic-border); background: var(--ic-card); }
.ic-setup-field { display: flex; align-items: center; gap: 6px; }
.ic-setup-field > span { font-size: 11px; font-weight: 600; color: var(--ic-muted); text-transform: uppercase; letter-spacing: .04em; }
.ic-setup-field input, .ic-setup-field select {
  font: inherit; font-size: 13px; color: var(--ic-text); background: rgba(255,255,255,.04);
  border: 1px solid var(--ic-border); border-radius: 7px; padding: 5px 7px; width: 64px; outline: none;
}
.ic-setup-field select { width: 56px; }
.ic-setup-field input:focus, .ic-setup-field select:focus { border-color: var(--ic-accent); }
.ic-setup-field select option { background: #15151f; color: #fff; }
.ic-setup-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ic-muted); cursor: pointer; }
.ic-setup-legend { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 11px; color: var(--ic-muted); }
.ic-setup-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px dashed; margin-right: 2px; vertical-align: middle; }
.ic-setup-legend .lg-bleed { border-color: #ff5d5d; }
.ic-setup-legend .lg-trim { border-top-style: solid; border-color: #4da3ff; }
.ic-setup-legend .lg-safe { border-color: #36d399; }

.ic-guides { pointer-events: none; }

/* ---- Stage / canvas ---- */
.ic-canvas-wrap {
  position: relative; width: 100%; height: 560px;
  border-radius: 14px; overflow: hidden;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 0 0/24px 24px,
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%) 12px 12px/24px 24px,
    #0e0e16;
  border: 1px solid var(--ic-border);
}
/* The admin shell sets `.dash svg { width:18px; height:18px }` for its nav/button
   icons. That selector (class+type) out-specifies `.ic-stage`, collapsing our stage
   SVG to 18px and hiding the whole canvas — so we force it back to full size. The
   same guard keeps any nested <svg> inside an uploaded template from being shrunk. */
.ic-stage { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: none; }
.ic-content svg { width: auto; height: auto; }
.ic-stage .ic-selectable { cursor: move; }

/* Shared admin CSS sets `.pd-qr-style-option:hover svg{color:var(--text-primary)}`,
   which is white in this dark theme — our QR dot/eye previews use `fill="currentColor"`,
   so on hover they turn white-on-light and vanish. Keep them legible on hover/selected. */
.pd-qr-style-option:hover svg { color: var(--text-secondary); }
.pd-qr-style-option.selected svg,
.pd-qr-style-option.selected:hover svg { color: var(--accent); }

/* The placeholder overlays the WHITE artboard (always rendered), so it can't
   inherit the theme's muted text colour — near-white on white is invisible.
   A self-contained dark pill stays readable on any backdrop/theme. */
.ic-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  pointer-events: none; text-align: center; padding: 24px;
}
.ic-empty svg { width: 48px; height: 48px; color: #5b617a; filter: drop-shadow(0 1px 3px rgba(255,255,255,.55)); }
.ic-empty p {
  margin: 0; font-size: 13px; font-weight: 600; color: #e8ebf7;
  background: rgba(20,20,32,.82); border: 1px solid rgba(255,255,255,.14);
  padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}

/* ---- Selection overlay (SVG els get these classes) ---- */
.ic-sel-box { fill: none; stroke: var(--ic-accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.ic-sel-rotate-line { stroke: var(--ic-accent); stroke-width: 1.5; pointer-events: none; }
.ic-sel-handle { fill: #fff; stroke: var(--ic-accent); stroke-width: 1.5; }
.ic-sel-handle.nw, .ic-sel-handle.se { cursor: nwse-resize; }
.ic-sel-handle.ne, .ic-sel-handle.sw { cursor: nesw-resize; }
.ic-sel-handle.n, .ic-sel-handle.s { cursor: ns-resize; }
.ic-sel-handle.e, .ic-sel-handle.w { cursor: ew-resize; }
.ic-sel-rotate { fill: #fff; stroke: var(--ic-accent); stroke-width: 1.5; cursor: grab; }
.ic-sel-delete { cursor: pointer; }
.ic-sel-delete .ic-sel-delete-bg { fill: #ef4444; stroke: #fff; stroke-width: 1.5; }
.ic-sel-delete:hover .ic-sel-delete-bg { fill: #dc2626; }
.ic-sel-delete line { stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.ic-sel-rotate-line { stroke: var(--ic-accent); stroke-width: 1.5; }

/* ---- Floating context toolbar (balloon) ---- */
.ic-balloon {
  position: absolute; z-index: 30; display: flex; align-items: center; gap: 4px;
  padding: 5px 6px; border-radius: 12px; white-space: nowrap;
  transform: translateX(-50%); transform-origin: 50% 100%;
  background: #1b1b27; border: 1px solid var(--ic-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ic-balloon::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg);
  background: #1b1b27; border-right: 1px solid var(--ic-border); border-bottom: 1px solid var(--ic-border);
}
.ic-balloon.ic-bln-below::after { top: -5px; bottom: auto; border: 0; border-left: 1px solid var(--ic-border); border-top: 1px solid var(--ic-border); }
.ic-bln-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--ic-text); cursor: pointer;
  transition: background .15s, color .15s;
}
.ic-bln-btn svg { width: 17px; height: 17px; }
.ic-bln-btn:hover { background: rgba(255,255,255,.10); }
.ic-bln-btn:disabled { opacity: .32; cursor: default; }
.ic-bln-btn:disabled:hover { background: transparent; }
.ic-bln-btn.active { background: var(--ic-accent); color: #fff; }
.ic-bln-btn.ic-bln-danger:hover { background: #ef4444; color: #fff; }
.ic-bln-sep { width: 1px; height: 20px; background: var(--ic-border); margin: 0 2px; }
.ic-bln-select {
  height: 30px; max-width: 124px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--ic-border); background: rgba(255,255,255,.05);
  color: var(--ic-text); font: inherit; font-size: 12px; padding: 0 6px;
}
.ic-bln-num {
  width: 48px; height: 30px; border-radius: 8px; text-align: center;
  border: 1px solid var(--ic-border); background: rgba(255,255,255,.05);
  color: var(--ic-text); font: inherit; font-size: 12px;
}
.ic-bln-color { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid var(--ic-border); }
.ic-bln-color input { width: 150%; height: 150%; margin: -25%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.ic-bln-pop {
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px;
  border-radius: 10px; background: #1b1b27; border: 1px solid var(--ic-border);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.ic-bln-pop-btn { padding: 6px 10px; border: 0; border-radius: 7px; background: rgba(255,255,255,.05); color: var(--ic-text); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.ic-bln-pop-btn:hover { background: var(--ic-accent); color: #fff; }
.ic-bln-colorpop { grid-template-columns: repeat(5, 1fr); max-width: 184px; }
.ic-bln-swatch { position: relative; overflow: hidden; display: inline-block; width: 26px; height: 26px; padding: 0; border-radius: 7px; border: 1px solid rgba(255,255,255,.28); cursor: pointer; transition: transform .12s; }
.ic-bln-swatch:hover { transform: scale(1.1); }
/* the colour input fills the swatch invisibly so the native picker anchors to it */
.ic-bln-swatch input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
.ic-bln-pop-empty { grid-column: 1 / -1; font-size: 11px; color: var(--ic-muted); padding: 2px 4px; white-space: nowrap; }

/* ---- Zoom bar ---- */
.ic-zoombar { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.ic-zoom-btn {
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--ic-text);
  min-width: 32px; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--ic-border); background: var(--ic-card);
}
.ic-zoom-btn:hover { border-color: var(--ic-accent); }
.ic-zoom-label { font-size: 12px; color: var(--ic-muted); min-width: 46px; text-align: center; }

/* ---- Right panel: tabs ---- */
.ic-tabs { display: flex; border-bottom: 1px solid var(--ic-border); }
.ic-tab {
  flex: 1; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ic-muted); padding: 13px 10px; background: transparent; border: 0;
  border-bottom: 2px solid transparent;
}
.ic-tab:hover { color: var(--ic-text); }
.ic-tab.active { color: var(--ic-text); border-bottom-color: var(--ic-accent); }

.ic-panel { display: none; padding: 16px; max-height: 600px; overflow-y: auto; }
.ic-panel.active { display: block; }
.ic-empty-note { color: var(--ic-muted); font-size: 13px; margin: 6px 0; text-align: center; }

/* ---- Element panel fields ---- */
.ic-el-title { font-size: 14px; font-weight: 700; color: var(--ic-text); margin-bottom: 14px; }
.ic-field-group { margin-bottom: 16px; }
.ic-field-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ic-muted); margin-bottom: 7px;
}
.ic-field-row { display: flex; gap: 8px; align-items: center; }
.ic-field { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
  border: 1px solid var(--ic-border); background: var(--ic-card); border-radius: 8px; padding: 0 8px; }
.ic-field:focus-within { border-color: var(--ic-accent); }
.ic-field > span { font-size: 11px; color: var(--ic-muted); flex: 0 0 auto; }
.ic-field input, .ic-field select {
  font: inherit; font-size: 13px; color: var(--ic-text); background: transparent;
  border: 0; outline: none; width: 100%; padding: 7px 0; min-width: 0;
}
.ic-field-grow { flex: 2; }
.ic-field-color input[type=color] { width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.ic-select option { background: #15151f; color: #fff; }
.ic-textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--ic-text);
  background: var(--ic-card); border: 1px solid var(--ic-border); border-radius: 8px;
  padding: 8px; resize: vertical; outline: none; margin-bottom: 8px;
}
.ic-textarea:focus { border-color: var(--ic-accent); }

.ic-lock { cursor: pointer; border: 1px solid var(--ic-border); background: var(--ic-card);
  border-radius: 8px; width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--ic-muted); flex: 0 0 auto; }
.ic-lock[aria-pressed=true] { color: var(--ic-accent); border-color: var(--ic-accent); }
.ic-lock svg { width: 15px; height: 15px; }

.ic-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ic-swatch { width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); }
.ic-swatch.active { box-shadow: 0 0 0 2px var(--ic-accent); }

.ic-el-actions { display: flex; gap: 8px; margin-top: 6px; }
.ic-el-actions .ic-btn { flex: 1; justify-content: center; }

/* ---- Layers ---- */
.ic-layers-list { display: flex; flex-direction: column; gap: 4px; }
.ic-layer-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px;
  cursor: pointer; border: 1px solid transparent; background: var(--ic-card);
}
.ic-layer-row:hover { border-color: var(--ic-border); }
.ic-layer-row.active { border-color: var(--ic-accent); background: rgba(103,68,218,.12); }
.ic-layer-row.is-hidden { opacity: .5; }
.ic-layer-name { flex: 1; font-size: 13px; color: var(--ic-text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.ic-layer-ico { cursor: pointer; border: 0; background: none; color: var(--ic-muted);
  padding: 3px; display: inline-flex; }
.ic-layer-ico:hover { color: var(--ic-text); }
.ic-layer-ico svg { width: 15px; height: 15px; }

/* ---- Loading overlay ---- */
.ic-loader { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; background: rgba(8,8,14,.6);
  backdrop-filter: blur(2px); z-index: 5; color: var(--ic-text); font-size: 13px; }
.ic-loader-spin { width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15); border-top-color: var(--ic-accent);
  animation: ic-spin .8s linear infinite; }
@keyframes ic-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Customer personalize modal (product page) — unit tabs + layout
   ============================================================ */
.ic-unit-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-right:8px}
.ic-unit-tab{padding:6px 12px;border-radius:8px;border:1px solid var(--border,rgba(255,255,255,.14));background:transparent;color:var(--text-secondary,#a8a8bf);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.ic-unit-tab:hover{border-color:var(--accent,#6744DA);color:var(--text-primary,#fff)}
.ic-unit-tab.active{background:var(--accent,#6744DA);border-color:var(--accent,#6744DA);color:#fff}
.ic-customer-editor .pd-editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ic-customer-editor .pd-editor-layout-right{max-height:74vh;overflow-y:auto;padding-right:4px}
.ic-customer-editor .pd-editor-canvas-wrap{height:clamp(420px,64vh,760px)}

/* Zoom controls as a floating pill inside the canvas (bottom-right) */
.ic-zoombar--overlay{position:absolute;right:12px;bottom:12px;z-index:20;margin-top:0;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(20,20,32,.85);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ic-zoombar--overlay .ic-zoom-label{min-width:40px;color:#cfd4e8}
.ic-zoombar--overlay input[type=range]{width:110px;accent-color:var(--accent,#6744DA);cursor:pointer}
@media(max-width:560px){.ic-zoombar--overlay input[type=range]{width:70px}}
@media(max-width:860px){
  .ic-customer-editor .pd-editor-layout{grid-template-columns:1fr}
  .ic-customer-editor .pd-editor-layout-right{max-height:none}
}

/* ============================================================
   Light theme — most chrome adapts via the --ic-* variables (which inherit the
   global light palette), but a handful of surfaces hardcode dark hex. Re-skin
   only those here so the studio matches the rest of the admin in light mode
   (key: localStorage 'admin-theme'). Dark mode is untouched.
   ============================================================ */
[data-theme="light"] .ic-canvas-wrap {
  background:
    linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%) 0 0/24px 24px,
    linear-gradient(45deg, rgba(0,0,0,.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.04) 75%) 12px 12px/24px 24px,
    #eef0f6;
}
/* Empty-state pill */
[data-theme="light"] .ic-empty p {
  color: #1a1a2e; background: rgba(255,255,255,.92);
  border-color: rgba(103,68,218,.14); box-shadow: 0 4px 16px rgba(0,0,0,.10);
}
[data-theme="light"] .ic-empty svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.12)); }
/* Floating context balloon + its arrow */
[data-theme="light"] .ic-balloon { background: #ffffff; box-shadow: 0 10px 30px rgba(20,20,40,.18); }
[data-theme="light"] .ic-balloon::after { background: #ffffff; }
[data-theme="light"] .ic-bln-btn:hover { background: rgba(103,68,218,.10); }
[data-theme="light"] .ic-bln-select,
[data-theme="light"] .ic-bln-num { background: rgba(103,68,218,.05); }
/* Colour-swatch popup */
[data-theme="light"] .ic-bln-pop { background: #ffffff; box-shadow: 0 10px 26px rgba(20,20,40,.18); }
[data-theme="light"] .ic-bln-pop-btn { background: rgba(103,68,218,.06); }
/* Native <select> dropdown options */
[data-theme="light"] .ic-setup-field select option,
[data-theme="light"] .ic-select option { background: #ffffff; color: #1a1a2e; }
/* Setup-field inputs (subtle tint so they read on a light panel) */
[data-theme="light"] .ic-setup-field input,
[data-theme="light"] .ic-setup-field select { background: rgba(103,68,218,.04); }
/* Floating zoom pill */
[data-theme="light"] .ic-zoombar--overlay {
  background: rgba(255,255,255,.88); border-color: rgba(103,68,218,.14);
  box-shadow: 0 6px 20px rgba(20,20,40,.16);
}
[data-theme="light"] .ic-zoombar--overlay .ic-zoom-label { color: #4b5563; }