/* Shadow Style Shop — konfigurator majica (Fabric.js). Crveno/tamna tema. */

/* Lokalni tokeni konfiguratora (mapirani na Shadow paletu; akcenat = crvena). */
.cfg, .cfgm, .cfgz {
  --gap: 1.5rem;
  --radius-l: 16px;
  --radius: 12px;
  --radius-s: 8px;
  --surface: #0e0808;
  --bg-1: #0a0606;
  --bg: #121010;
  --line: rgba(255, 255, 255, 0.10);
  --text: #fefefe;
  --muted: #b0aaaa;
  --muted-2: #8a8686;
  --gold: #ff4f5e;          /* svetli crveni akcenat */
  --gold-soft: #c21d27;     /* osnovna crvena */
  --font-display: 'Space Grotesk', sans-serif;
  --step--1: 0.85rem;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --shadow: 0 24px 64px rgba(0, 0, 0, .55);
  --ok: #2ecc71;
  --danger: #ff6b6b;
}

.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(194,29,39,.14), 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; cursor:pointer; }
.cfg__sides button.on{ background:linear-gradient(135deg,var(--gold-soft),var(--gold)); color:#fff; }
.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:#fff; 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); cursor:pointer; }
.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(194,29,39,.16);
  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); cursor:pointer; }
.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__accent{ color:var(--gold); font-weight:700; }

.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); cursor:pointer; }
.cfg__seg button.on{ border-color:var(--gold); color:var(--gold); background:rgba(194,29,39,.10); }

.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(194,29,39,.30); }
.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; cursor:pointer; }
.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,
.cfgm input[type=text], .cfgm input[type=email], .cfgm input[type=tel], .cfgm input[type=number], .cfgm select, .cfgm 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,
.cfgm input:focus, .cfgm select:focus, .cfgm 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; }
/* Glavni CTA konfiguratora — pun širine, crveni (radi i bez base .btn--lg). */
.cfg__submit{ width:100%; justify-content:center; text-align:center; font-size:1.02rem; padding:.9rem 1.2rem; }
.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); cursor:pointer; }
.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(194,29,39,.10); }
.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:1200; display:none; place-items:center; padding:1rem; background:rgba(2,2,2,.78); 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; cursor:pointer; }
.cfgm__msg{ padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.9rem; display:none; }
.cfgm__msg.ok{ display:block; background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.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(2,2,2,.6); border-radius:var(--radius-l); z-index:5; }
.cfg__loading.on{ display:grid; }
.cfg__spin{ width:42px; height:42px; border:3px solid rgba(194,29,39,.30); 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:1300; display:none; place-items:center; padding:1.5rem; background:rgba(2,2,2,.88); 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; cursor:pointer; }
.cfgz__close:hover{ color:var(--gold); border-color:var(--gold); }

/* ── Klasična forma (fallback ispod konfiguratora) ── */
.custom-fallback{ max-width:820px; margin:3rem auto 0; padding-top:2rem; border-top:1px solid var(--border-subtle, rgba(255,255,255,.06)); }
.custom-fallback__head{ text-align:center; margin-bottom:1.4rem; }
.custom-fallback__head h2{ font-size:clamp(1.4rem,3.4vw,1.9rem); margin:0 0 .5rem; }
.custom-fallback__head p{ color:#b0aaaa; max-width:560px; margin:0 auto; font-size:.95rem; }