/* Jupiter Planet — konfigurator */
.cfg{
  display:grid; gap:var(--gap); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:980px){ .cfg{ grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); } }

/* ── Stage (canvas) ── */
.cfg__stage{
  position:relative; background:
    radial-gradient(120% 90% at 50% 0%, rgba(232,178,58,.10), transparent 55%),
    linear-gradient(180deg, var(--surface), var(--bg-1));
  border:1px solid var(--line); border-radius:var(--radius-l); padding:1rem;
  overflow:hidden;
}
.cfg__canvas-wrap{ position:relative; width:100%; max-width:520px; margin-inline:auto;
  border-radius:var(--radius); background:
    radial-gradient(70% 60% at 50% 42%, rgba(245,241,232,.16), rgba(245,241,232,.05) 55%, transparent 72%); }
/* Fabric postavlja inline 600×720 na .canvas-container — skaliramo na širinu kolone */
.cfg__canvas-wrap .canvas-container{ width:100% !important; height:auto !important; aspect-ratio:600/720; }
.cfg__canvas-wrap canvas{ width:100% !important; height:100% !important; }
.cfg__hint{ text-align:center; color:var(--muted-2); font-size:var(--step--1); margin-top:.6rem; }

.cfg__sides{ display:inline-flex; gap:.3rem; background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:.25rem; margin:0 auto 1rem; }
.cfg__sides button{ position:relative; padding:.45rem 1.1rem; border-radius:999px; background:transparent; border:0; color:var(--muted); font-family:var(--font-display); font-weight:600; font-size:.9rem; }
.cfg__sides button.on{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#1a1405; }
.cfg__sides button.has-design::after{ content:""; position:absolute; top:4px; right:6px; width:7px; height:7px; border-radius:50%; background:var(--gold); border:1px solid var(--bg); }
.cfg__sides button.on.has-design::after{ background:#1a1405; border-color:transparent; }
.cfg__sidebar-head{ display:flex; justify-content:center; align-items:flex-start; gap:.6rem; position:relative; }
.cfg__zoom{ position:absolute; right:0; top:0; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--muted); transition:.15s var(--ease); }
.cfg__zoom:hover{ color:var(--gold); border-color:var(--gold); }
.cfg__zoom svg{ width:18px; height:18px; }

/* prazno stanje — uputstvo preko CELOG komada; ne hvata klik (klik ide na canvas
   pa bira mesto: rukav, leđa, dole) */
.cfg__empty{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  pointer-events:none; border:0; color:var(--muted); padding:1rem;
  font-size:.85rem; line-height:1.45; text-align:center; transition:opacity .18s var(--ease); }
.cfg__empty.hide{ display:none; }
.cfg__empty.pinned{ opacity:.14; }              /* kad je mesto izabrano, uputstvo se povuče */
.cfg__empty small{ font-size:.72rem; opacity:.8; }
.cfg__empty-plus{ width:42px; height:42px; display:grid; place-items:center; border:1.5px dashed var(--gold); border-radius:50%; font-size:1.5rem; line-height:1; color:var(--gold); }
/* tačka „ovde sleće sledeći element" na mestu klika */
.cfg__pin{ position:absolute; transform:translate(-50%,-50%); width:40px; height:40px; display:grid; place-items:center;
  border:2px dashed var(--gold); border-radius:50%; color:var(--gold); background:rgba(232,178,58,.14);
  font-size:1.4rem; line-height:1; pointer-events:none; opacity:0; transition:opacity .18s var(--ease); z-index:3; }
.cfg__pin.on{ opacity:1; }

.cfg__canvas-wrap.dragover{ outline:2px dashed var(--gold); outline-offset:-6px; }

/* toolbar ispod canvasa */
.cfg__toolbar{ display:flex; justify-content:center; align-items:center; gap:.35rem; margin-top:.8rem; }
.cfg__toolbar button{ width:44px; height:44px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--muted); transition:.15s var(--ease); }
.cfg__toolbar button:hover:not(:disabled){ color:var(--gold); border-color:var(--gold); }
.cfg__toolbar button:disabled{ opacity:.35; cursor:default; }
.cfg__toolbar button svg{ width:17px; height:17px; }
.cfg__toolbar #cfgDelete:hover, .cfg__toolbar #cfgClear:hover{ color:var(--danger); border-color:var(--danger); }
.cfg__toolbar-sep{ width:1px; height:22px; background:var(--line); margin:0 .25rem; }

/* ── Controls panel ── */
.cfg__panel{ display:flex; flex-direction:column; gap:1.25rem; }
.cfg__group{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; }
.cfg__group > h3{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 .85rem; font-family:var(--font-display); }

.cfg__seg{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cfg__seg button{ flex:1 1 auto; min-width:90px; padding:.6rem .8rem; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--bg); color:var(--text); font-weight:600; font-size:.92rem; transition:.18s var(--ease); }
.cfg__seg button.on{ border-color:var(--gold); color:var(--gold); background:rgba(232,178,58,.08); }

.cfg__swatches{ display:flex; flex-wrap:wrap; gap:.55rem; }
.cfg__sw{ width:40px; height:40px; border-radius:50%; border:2px solid var(--line); position:relative; cursor:pointer; transition:transform .15s var(--ease); }
.cfg__sw:hover{ transform:scale(1.08); }
.cfg__sw.on{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,178,58,.22); }
.cfg__sw.on::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:.8rem; color:var(--mix,#000); }

.cfg__tools{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cfg__tool{ display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.8rem .5rem; border:1px dashed var(--line); border-radius:var(--radius-s); background:var(--bg); color:var(--text); font-size:.82rem; font-weight:600; }
.cfg__tool:hover{ border-color:var(--gold); color:var(--gold); border-style:solid; }
.cfg__tool svg{ width:22px; height:22px; }

.cfg__row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.cfg__row label{ font-size:.82rem; color:var(--muted); min-width:64px; }
.cfg input[type=text], .cfg input[type=email], .cfg input[type=tel], .cfg input[type=number], .cfg select, .cfg textarea{
  width:100%; padding:.6rem .7rem; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-s); color:var(--text); font:inherit;
}
.cfg input:focus, .cfg select:focus, .cfg textarea:focus{ outline:none; border-color:var(--gold); }
.cfg__inline{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; }
.cfg__color-in{ width:38px; height:38px; padding:0; border:1px solid var(--line); border-radius:8px; background:none; }

/* sizes grid */
.cfg__sizes{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media(min-width:420px){ .cfg__sizes{ grid-template-columns:repeat(6,1fr); } }
.cfg__size{ text-align:center; }
.cfg__size span{ display:block; font-size:.72rem; color:var(--muted); margin-bottom:.25rem; }
.cfg__size input{ text-align:center; padding:.4rem .2rem; }

.cfg__actions{ display:block; }
.cfg__tpls{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.9rem; }
.cfg__tpls-label{ font-size:.74rem; color:var(--muted-2); letter-spacing:.06em; text-transform:uppercase; margin-right:.2rem; }
.cfg__tpls button{ padding:.35rem .7rem; border-radius:999px; border:1px dashed var(--line); background:var(--bg); color:var(--muted); font-size:.8rem; font-weight:600; transition:.15s var(--ease); }
.cfg__tpls button:hover{ color:var(--gold); border-color:var(--gold); border-style:solid; }
.cfg__tool--mini{ flex:0 0 auto; flex-direction:row; padding:.45rem .8rem; }
.cfg__tool--mini.on{ border-color:var(--gold); color:var(--gold); border-style:solid; background:rgba(232,178,58,.08); }
.cfg__textopts{ display:none; margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); }
.cfg__textopts.show{ display:block; }

.cfg__alt{ text-align:center; font-size:var(--step--1); color:var(--muted); margin-top:.4rem; }
.cfg__alt a{ color:var(--gold); text-decoration:underline; text-underline-offset:3px; }

/* ── Modal (kontakt podaci za ponudu) ── */
.cfgm{ position:fixed; inset:0; z-index:120; display:none; place-items:center; padding:1rem; background:rgba(5,5,8,.72); backdrop-filter:blur(6px); }
.cfgm.open{ display:grid; }
.cfgm__box{ width:min(560px,100%); max-height:92vh; overflow:auto; background:linear-gradient(180deg,var(--surface),var(--bg-1)); border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(1.2rem,3vw,2rem); box-shadow:var(--shadow); }
.cfgm__box h3{ margin-top:0; }
.cfgm__previews{ display:flex; gap:.7rem; justify-content:center; margin:.4rem 0 1.1rem; }
.cfgm__previews figure{ margin:0; text-align:center; }
.cfgm__previews img{ width:120px; height:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.cfgm__previews figcaption{ font-size:.72rem; color:var(--muted); margin-top:.3rem; }
.cfgm__form{ display:flex; flex-direction:column; gap:.8rem; }
.cfgm__close{ float:right; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:1.1rem; }
.cfgm__msg{ padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.9rem; display:none; }
.cfgm__msg.ok{ display:block; background:rgba(88,200,132,.12); border:1px solid rgba(88,200,132,.4); color:var(--ok); }
.cfgm__msg.err{ display:block; background:rgba(255,93,93,.1); border:1px solid rgba(255,93,93,.4); color:var(--danger); }

.cfg__loading{ position:absolute; inset:0; display:none; place-items:center; background:rgba(10,10,13,.6); border-radius:var(--radius-l); z-index:5; }
.cfg__loading.on{ display:grid; }
.cfg__spin{ width:42px; height:42px; border:3px solid rgba(232,178,58,.25); border-top-color:var(--gold); border-radius:50%; animation:cfgspin .8s linear infinite; }
@keyframes cfgspin{ to{ transform:rotate(360deg); } }

/* ── Zoom pregled (fullscreen) ── */
.cfgz{ position:fixed; inset:0; z-index:130; display:none; place-items:center; padding:1.5rem; background:rgba(5,5,8,.85); backdrop-filter:blur(8px); cursor:zoom-out; }
.cfgz.open{ display:grid; }
.cfgz img{ max-width:min(92vw,640px); max-height:88vh; border-radius:14px; border:1px solid var(--line); box-shadow:var(--shadow); }
.cfgz__close{ position:absolute; top:1rem; right:1rem; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:1.15rem; }
.cfgz__close:hover{ color:var(--gold); border-color:var(--gold); }