/* 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%); }
.cfg__canvas-wrap canvas{ width:100% !important; height:auto !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{ 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__sidebar-head{ display:flex; justify-content:center; }

/* ── 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:34px; height:34px; 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:flex; gap:.6rem; flex-wrap:wrap; }
.cfg__mini{ display:flex; gap:.5rem; }
.cfg__mini button{ padding:.5rem .8rem; border-radius:var(--radius-s); border:1px solid var(--line); background:var(--bg); color:var(--muted); font-size:.85rem; }
.cfg__mini button:hover{ color:var(--danger); border-color:var(--danger); }

.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); } }