/* ────────────────────────────────────────────────────────────────
   CONFIGURATOR — premium two-column experience
   Relies on the CSS custom properties defined in the page's :root
   (--bg, --bg2, --cyan, --cyan2, --gold2, --white, --muted, --border,
   --border2, --blue-card) so it stays visually consistent with the
   rest of the site.
   ──────────────────────────────────────────────────────────────── */

.cfg-bg { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.cfg-layout { display:grid; grid-template-columns:62fr 38fr; gap:3rem; align-items:start; }

/* ── STAGE (left column) ───────────────────────────────────────── */

.cfg-stage-col { position:sticky; top:82px; display:flex; flex-direction:column; gap:1.2rem; }

.cfg-stage {
  position:relative; overflow:hidden;
  background:rgba(0,0,0,.35); border:1px solid var(--border2); border-radius:20px;
  padding:2rem 1.6rem 1.4rem;
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  cursor:grab; touch-action:none;
}
.cfg-stage.dragging { cursor:grabbing; }

.cfg-stage-glow {
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 65% 55% at 50% 42%, rgba(var(--stage-glow-rgb,26,58,106),.55) 0%, transparent 70%);
  filter:blur(40px);
  transition:background 1.1s ease;
}
@keyframes cfgGlowPulse { 0%,100%{opacity:.8;} 50%{opacity:1;} }
.cfg-stage-glow { animation:cfgGlowPulse 5s ease-in-out infinite; }

.cfg-stage-ring {
  position:absolute; z-index:0; pointer-events:none;
  width:82%; padding-bottom:82%; border-radius:50%;
  border:1px dashed rgba(0,200,255,.18);
  animation:cfgRingSpin 50s linear infinite;
}
@keyframes cfgRingSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.cfg-pre-label { position:relative; z-index:1; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--muted); letter-spacing:.2em; }

.cfg-photo-wrap {
  position:relative; z-index:1;
  /* Height-driven, not width-driven: each rotation angle photo is a different
     shape (a front view is much wider than an edge-on side view), so we fix
     the height and let JS set aspect-ratio to the current photo's real
     dimensions, letting width shrink to fit it — the box always hugs the
     cabinet with no empty margins, instead of floating a narrow photo inside
     a fixed square. */
  height:min(420px, 70vw); width:auto; max-width:100%; aspect-ratio:1/1; margin:0 auto;
  border-radius:10px;
  background:
    radial-gradient(ellipse 78% 62% at 50% 54%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 45%, transparent 72%),
    radial-gradient(ellipse 60% 10% at 50% 93%, rgba(255,255,255,.16) 0%, transparent 75%);
  transition:opacity .15s ease;
}
/* Brief dip while a new rotation frame photo loads and the canvases redraw from it */
.cfg-photo-wrap.is-turning { opacity:.35; }

.cfg-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; border-radius:6px; }
.cfg-canvas-joy { z-index:3; }
#cfgColorCanvas { filter:drop-shadow(0 0 1.5px rgba(255,255,255,.6)) drop-shadow(0 0 12px rgba(120,190,255,.28)); }

/* The raw photo is never shown directly — the color canvas paints a re-tinted
   copy of it on top. It only needs to exist, decoded, as a drawImage() source. */
.cfg-machine-img { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }

.cfg-rotate-hint {
  position:relative; z-index:4; margin-top:-.4rem;
  font-size:10px; color:var(--muted); letter-spacing:.05em; opacity:.85;
  transition:opacity .4s;
}
.cfg-stage.dragging .cfg-rotate-hint, .cfg-rotate-hint.hidden { opacity:0; }

.cfg-angle-track { position:relative; z-index:1; display:flex; gap:6px; }
.cfg-angle-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.18); transition:background .2s,transform .2s,width .2s; }
.cfg-angle-dot.on { background:var(--cyan); transform:scale(1.3); width:16px; border-radius:4px; }

.cfg-model-name { position:relative; z-index:1; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--cyan); text-align:center; line-height:1.7; }

.cfg-spec-strip {
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem;
  background:rgba(0,0,0,.32); border:1px solid var(--border); border-radius:12px;
  padding:.8rem .6rem; backdrop-filter:blur(6px);
}
.cfg-spec { display:flex; flex-direction:column; gap:3px; text-align:center; min-width:0; }
.cfg-spec span { font-size:9px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.cfg-spec strong { font-size:12px; color:var(--white); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cfg-price-live {
  display:flex; align-items:baseline; justify-content:space-between;
  background:rgba(0,0,0,.3); border:1px solid var(--border2); border-radius:14px;
  padding:1rem 1.3rem;
}
.cfg-price-label { font-family:'Press Start 2P',monospace; font-size:8px; color:var(--muted); letter-spacing:.12em; }
.cfg-price-value { font-family:'Press Start 2P',monospace; font-size:19px; color:var(--cyan); text-shadow:0 0 18px rgba(0,200,255,.5); font-variant-numeric:tabular-nums; }

/* ── OPTIONS (right column) ────────────────────────────────────── */

.cfg-options-col { display:flex; flex-direction:column; gap:1.4rem; }

.cfg-accordion { display:flex; flex-direction:column; gap:.7rem; }

.cfg-acc-item {
  background:var(--blue-card); border:1px solid var(--border); border-radius:14px;
  overflow:hidden; transition:border-color .2s;
}
.cfg-acc-item.is-open { border-color:var(--border2); }

.cfg-acc-head {
  width:100%; display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.2rem; background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Inter',sans-serif; color:var(--white);
}
.cfg-acc-num { font-family:'Press Start 2P',monospace; font-size:9px; color:var(--muted); flex-shrink:0; }
.cfg-acc-item.is-open .cfg-acc-num { color:var(--cyan); }
.cfg-acc-title { font-size:14px; font-weight:600; flex-shrink:0; }
.cfg-acc-swatch { width:16px; height:16px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.25); }
.cfg-acc-value { font-size:12px; color:var(--cyan2); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfg-acc-check { color:var(--gold2); font-size:12px; flex-shrink:0; opacity:0; transition:opacity .2s; }
.cfg-acc-item.is-visited .cfg-acc-check { opacity:1; }
.cfg-acc-chevron { flex-shrink:0; color:var(--muted); transition:transform .25s; font-size:11px; }
.cfg-acc-item.is-open .cfg-acc-chevron { transform:rotate(180deg); color:var(--cyan); }

.cfg-acc-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
.cfg-acc-item.is-open .cfg-acc-body { grid-template-rows:1fr; }
.cfg-acc-body-inner { min-height:0; overflow:hidden; padding:0 1.2rem; }
.cfg-acc-item.is-open .cfg-acc-body-inner { padding:0 1.2rem 1.2rem; }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  padding:10px 16px; border-radius:8px; font-size:13px; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); color:var(--muted); background:transparent;
  font-family:'Inter',sans-serif; transition:all .2s;
}
.chip:hover { border-color:var(--cyan); color:var(--cyan); transform:translateY(-1px); }
.chip.on { border-color:var(--cyan); background:rgba(0,200,255,.14); color:var(--cyan2); box-shadow:0 0 0 1px var(--cyan) inset, 0 0 18px rgba(0,200,255,.25); }
.chip-icon { width:20px; height:20px; object-fit:cover; border-radius:5px; vertical-align:-5px; margin-right:4px; }

.cc-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.cc-swatch {
  width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer;
  border:2px solid transparent; position:relative; transition:transform .18s;
}
.cc-swatch:hover { transform:scale(1.08); }
.cc-swatch.on::after { content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--cyan); box-shadow:0 0 14px rgba(0,200,255,.4); }
.cc-name { font-size:12px; color:var(--muted); margin-top:10px; }

.cfg-vinyl-row { display:flex; flex-wrap:wrap; gap:12px; }
.cfg-vinyl-swatch {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:84px; padding:6px; border-radius:10px; cursor:pointer;
  border:2px solid rgba(255,255,255,.12); background:rgba(0,0,0,.2);
  font-family:'Inter',sans-serif; transition:all .18s;
}
.cfg-vinyl-swatch img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:6px; display:block; }
.cfg-vinyl-swatch span { font-size:10.5px; color:var(--muted); text-align:center; line-height:1.2; }
.cfg-vinyl-swatch:hover { transform:translateY(-2px); border-color:var(--cyan); }
.cfg-vinyl-swatch.on { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset, 0 0 18px rgba(0,200,255,.28); }
.cfg-vinyl-swatch.on span { color:var(--cyan2); }

.cfg-vinyl-suggest {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:120px; padding:8px 10px; border-radius:10px;
  border:2px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.03);
  text-align:center; cursor:default;
}
.cfg-vinyl-suggest-icon { font-size:20px; line-height:1; }
.cfg-vinyl-suggest-text { font-size:10.5px; color:var(--muted); line-height:1.35; }

.cfg-preview-link {
  display:inline-flex; align-items:center; gap:5px; margin-top:12px;
  padding:7px 12px; border-radius:7px; font-size:12px; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); color:var(--muted); background:transparent;
  font-family:'Inter',sans-serif; transition:all .2s;
}
.cfg-preview-link:hover { border-color:var(--cyan); color:var(--cyan); }

.cfg-extra-row { display:flex; align-items:center; gap:8px; }
.cfg-extra-row .cfg-preview-link { margin-top:0; padding:6px 10px; }

.cfg-preview-modal {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .2s ease;
  padding:2rem;
}
.cfg-preview-modal.open { opacity:1; visibility:visible; }
.cfg-preview-modal-inner {
  position:relative; max-width:min(560px,90vw); max-height:85vh;
  background:var(--bg2); border:1px solid var(--border2); border-radius:16px;
  padding:1.4rem; display:flex; flex-direction:column; align-items:center; gap:.8rem;
  transform:scale(.94); transition:transform .2s ease;
}
.cfg-preview-modal.open .cfg-preview-modal-inner { transform:scale(1); }
.cfg-preview-modal-inner img { max-width:100%; max-height:65vh; object-fit:contain; border-radius:10px; }
.cfg-preview-caption { font-size:12px; color:var(--muted); text-align:center; }
.cfg-preview-close {
  position:absolute; top:-14px; right:-14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border2); background:var(--bg2); color:var(--white);
  cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center;
}
.cfg-preview-close:hover { border-color:var(--cyan); color:var(--cyan); }

.cfg-quote-modal {
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .2s ease;
  padding:2rem;
}
.cfg-quote-modal.open { opacity:1; visibility:visible; }
.cfg-quote-modal-inner {
  position:relative; width:100%; max-width:400px; text-align:left;
  background:var(--bg2); border:1px solid var(--border2); border-radius:16px;
  padding:1.6rem; transform:scale(.94); transition:transform .2s ease;
}
.cfg-quote-modal.open .cfg-quote-modal-inner { transform:scale(1); }
.cfg-quote-modal-title { font-size:18px; font-weight:700; margin-bottom:.4rem; }
.cfg-quote-modal-sub { font-size:13px; color:var(--muted); margin-bottom:1rem; line-height:1.5; }
.cfg-quote-error { font-size:12px; color:var(--pink); margin:-4px 0 10px; display:none; }
.cfg-quote-error.show { display:block; }

.cfg-cta-bar { display:flex; flex-direction:column; gap:1rem; }
.price-box { background:rgba(0,0,0,.3); border:1px solid var(--border); border-radius:12px; padding:1.3rem; }
.prow { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding:5px 0; }
.ptotal { display:flex; justify-content:space-between; padding-top:12px; margin-top:8px; border-top:1px solid var(--border); font-size:17px; font-weight:600; }
.ptotal span:last-child { font-family:'Press Start 2P',monospace; font-size:13px; color:var(--cyan); }

.btn-order {
  width:100%; padding:15px; background:linear-gradient(135deg,var(--cyan-btn),#0070bb); color:#fff;
  border:none; border-radius:8px; cursor:pointer; font-family:'Press Start 2P',monospace;
  font-size:8px; letter-spacing:.04em; transition:all .2s; box-shadow:0 0 20px rgba(0,200,255,.25);
}
.btn-order:hover { transform:translateY(-1px); box-shadow:0 0 36px rgba(0,200,255,.45); }

@media (prefers-reduced-motion: reduce) {
  .cfg-stage-glow, .cfg-stage-ring { animation:none; }
  .cfg-photo-wrap, .cfg-acc-body, .cfg-acc-chevron, .cc-swatch, .chip { transition:none; }
}

@media(max-width:900px){
  .cfg-layout { grid-template-columns:1fr; gap:2rem; }
  .cfg-stage-col { position:static; }
}

@media(max-width:600px){
  .cfg-stage { padding:1.2rem .8rem 1rem; }
  .cfg-pre-label { font-size:6px; }
  .cfg-model-name { font-size:6px; }
  .cfg-spec-strip { grid-template-columns:repeat(2,1fr); }
  .cfg-price-value { font-size:16px; }
  .chips { gap:6px; }
  .chip { font-size:12px; padding:8px 11px; }
  .cc-swatch { width:34px; height:34px; }
  .cfg-acc-title { font-size:13px; }
  .cfg-acc-value { display:none; }
  .price-box { padding:1rem; }
  .prow { font-size:12px; }
  .ptotal { font-size:15px; }
  .ptotal span:last-child { font-size:11px; }
  .btn-order { font-size:7px; padding:13px; }
}