/* ── Inline Configurator Preview ─────────────────── */

/* Overlay that sits on top of the viewport canvas */
.cfg-preview{
  position:absolute;inset:0;z-index:50;
  background:#f5f6f8;
  display:none;flex-direction:column;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow:hidden;
  animation:cfgFadeIn .25s ease;
}
.cfg-preview.open{display:flex}
@keyframes cfgFadeIn{from{opacity:0}to{opacity:1}}

/* ── Top bar (inside preview) ── */
.cfg-topbar{
  height:40px;display:none;align-items:center;justify-content:space-between;
  padding:0 16px;background:#fff;
  border-bottom:1px solid #e9ebef;flex-shrink:0;
}
.cfg-topbar-title{font-size:13px;font-weight:700;color:#1a1d23}
.cfg-topbar-price{font-size:13px;font-weight:700;color:#4a6cf5}
.cfg-topbar-close{
  display:grid;place-items:center;width:26px;height:26px;border-radius:6px;
  border:none;background:transparent;color:#8d95a3;cursor:pointer;transition:all .15s;
}
.cfg-topbar-close:hover{background:#eef0f3;color:#1a1d23}
.cfg-topbar-close svg{width:14px;height:14px}

/* ── Main content area ── */
.cfg-body{
  flex:1;display:flex;overflow:hidden;
  min-height:0;
}

/* ── Viewer-first layout ── */
.cfg-body.layout-viewer-first{flex-direction:row}
.cfg-body.layout-viewer-first .cfg-viewer{flex:1;min-width:0}
.cfg-body.layout-viewer-first .cfg-options-panel{
  width:280px;flex-shrink:0;
  border-left:1px solid #e9ebef;
}

/* ── Canvas-first layout ── */
.cfg-body.layout-canvas-first{flex-direction:row}
.cfg-body.layout-canvas-first .cfg-viewer{width:240px;flex-shrink:0;border-right:1px solid #e9ebef}
.cfg-body.layout-canvas-first .cfg-canvas-area{flex:1;min-width:0}
.cfg-body.layout-canvas-first .cfg-options-panel{
  width:220px;flex-shrink:0;
  border-left:1px solid #e9ebef;
}

/* ── Split layout ── */
.cfg-body.layout-split{flex-direction:row}
.cfg-body.layout-split .cfg-viewer{flex:1;min-width:0}
.cfg-body.layout-split .cfg-canvas-area{flex:1;min-width:0;border-left:1px solid #e9ebef}
.cfg-body.layout-split .cfg-options-panel{
  width:240px;flex-shrink:0;
  border-left:1px solid #e9ebef;
}

/* ── Minimal layout ── */
.cfg-body.layout-minimal{flex-direction:row}
.cfg-body.layout-minimal .cfg-viewer{display:none}
.cfg-body.layout-minimal .cfg-canvas-area{display:none}
.cfg-body.layout-minimal .cfg-options-panel{flex:1}

/* ── 3D Viewer area ── */
.cfg-viewer{
  background:linear-gradient(135deg,#f0f1f4 0%,#e8eaee 100%);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.cfg-viewer-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#b4bac5;
}
.cfg-viewer-placeholder svg{width:48px;height:48px;opacity:.4}
.cfg-viewer-placeholder span{font-size:11px;font-weight:500}

/* ── 2D Canvas area ── */
.cfg-canvas-area{
  background:#fff;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.cfg-canvas-placeholder{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:#b4bac5;
}
.cfg-canvas-placeholder svg{width:40px;height:40px;opacity:.35}
.cfg-canvas-placeholder span{font-size:11px;font-weight:500}
/* Side tabs under canvas */
.cfg-side-tabs{
  display:flex;gap:4px;padding:8px 12px;
  border-top:1px solid #e9ebef;background:#fafbfc;flex-shrink:0;
}
.cfg-side-tab{
  padding:5px 12px;border-radius:6px;font-size:11px;font-weight:600;
  color:#8d95a3;background:transparent;border:1px solid transparent;
  cursor:pointer;transition:all .15s;
}
.cfg-side-tab:hover{color:#5f6878;background:#eef0f3}
.cfg-side-tab.active{color:#4a6cf5;background:#eff3ff;border-color:#e2eaff}

/* ── Options panel ── */
.cfg-options-panel{
  background:#fff;display:flex;flex-direction:row;overflow:hidden;
}

/* ── Group sidebar (vertical tabs) ── */
.cfg-group-sidebar{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 4px;flex-shrink:0;
  background:#fafbfc;border-right:1px solid #e9ebef;
  overflow-y:auto;
}
.cfg-group-tab{
  writing-mode:horizontal-tb;
  padding:8px 10px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:#8d95a3;background:transparent;border:none;
  border-radius:6px;cursor:pointer;transition:all .15s;
  white-space:nowrap;text-align:left;
}
.cfg-group-tab:hover{color:#5f6878;background:#eef0f3}
.cfg-group-tab.active{color:#4a6cf5;background:#eff3ff}
/* Group content area */
.cfg-group-content{
  flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;
}
.cfg-group-content.cfg-group-hidden{display:none}

/* Attribute navigation — tabs style */
.cfg-attr-nav{
  display:flex;gap:2px;padding:10px 12px 0;flex-shrink:0;
  overflow-x:auto;border-bottom:1px solid #e9ebef;
  scrollbar-width:none;-ms-overflow-style:none;
  position:relative;
}
.cfg-attr-nav::-webkit-scrollbar{display:none}
/* Fade masks for horizontal scroll hint */
.cfg-attr-nav-wrap{
  position:relative;flex-shrink:0;
}
.cfg-attr-nav-wrap::before,
.cfg-attr-nav-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:24px;
  pointer-events:none;z-index:1;opacity:0;transition:opacity .2s;
}
.cfg-attr-nav-wrap::before{left:0;background:linear-gradient(90deg,#fff 30%,transparent)}
.cfg-attr-nav-wrap::after{right:0;background:linear-gradient(-90deg,#fff 30%,transparent)}
.cfg-attr-nav-wrap.fade-left::before{opacity:1}
.cfg-attr-nav-wrap.fade-right::after{opacity:1}
.cfg-attr-tab{
  padding:8px 14px;font-size:11.5px;font-weight:600;
  color:#8d95a3;background:transparent;border:none;border-bottom:2px solid transparent;
  cursor:pointer;transition:all .15s;white-space:nowrap;
  margin-bottom:-1px;
}
.cfg-attr-tab:hover{color:#5f6878}
.cfg-attr-tab.active{color:#4a6cf5;border-bottom-color:#4a6cf5}

/* Attribute navigation — accordion style */
.cfg-attr-accordion{flex:1;overflow-y:auto;padding:0}
.cfg-acc-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;font-size:12.5px;font-weight:600;color:#1a1d23;
  cursor:pointer;border-bottom:1px solid #f0f1f4;
  transition:background .15s;
}
.cfg-acc-header:hover{background:#fafbfc}
.cfg-acc-header .cfg-acc-chev{
  width:14px;height:14px;color:#b4bac5;transition:transform .2s;
}
.cfg-acc-header.open .cfg-acc-chev{transform:rotate(180deg)}
.cfg-acc-body{display:none;padding:8px 14px 14px}
.cfg-acc-header.open + .cfg-acc-body{display:block}
/* Tabs / stepper panel visibility — class-based for JS coherence with .cfg-group-hidden */
.cfg-tab-content.is-hidden,
.cfg-step-content.is-hidden{display:none}

/* Attribute navigation — stepper style */
.cfg-stepper-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid #e9ebef;flex-shrink:0;
}
.cfg-stepper-label{font-size:12px;font-weight:600;color:#1a1d23}
.cfg-stepper-dots{display:flex;gap:5px}
.cfg-stepper-dot{
  width:7px;height:7px;border-radius:50%;background:#dde0e5;transition:all .2s;
}
.cfg-stepper-dot.active{background:#4a6cf5;transform:scale(1.2)}
.cfg-stepper-dot.done{background:#00b894}
.cfg-stepper-btn{
  display:grid;place-items:center;width:28px;height:28px;border-radius:6px;
  border:1px solid #e2e5ea;background:#fff;color:#5f6878;cursor:pointer;
  transition:all .15s;
}
.cfg-stepper-btn:hover{background:#f5f6f8;color:#1a1d23}
.cfg-stepper-btn svg{width:12px;height:12px}

/* Options list area (scrollable) */
.cfg-options-list{
  flex:1;overflow-y:auto;padding:12px 14px;
  display:flex;flex-direction:column;gap:6px;
}

/* ── Option items — Swatches ── */
.cfg-opt-swatches{display:flex;flex-wrap:wrap;gap:8px}
.cfg-swatch{
  width:36px;height:36px;border-radius:8px;
  border:2px solid #e2e5ea;cursor:pointer;
  transition:all .15s;position:relative;
  background-size:cover;background-position:center;
}
.cfg-swatch:hover{border-color:#b4bac5;transform:scale(1.08)}
.cfg-swatch.active{border-color:#4a6cf5;box-shadow:0 0 0 2px rgba(74,108,245,.25)}
.cfg-swatch.active::after{
  content:'';position:absolute;inset:0;border-radius:6px;
  background:rgba(74,108,245,.12);
}

/* ── Option items — Cards ── */
.cfg-opt-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cfg-card{
  border-radius:8px;border:1.5px solid #e9ebef;overflow:hidden;
  cursor:pointer;transition:all .18s;background:#fff;
}
.cfg-card:hover{border-color:#d0d4db;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.cfg-card.active{border-color:#4a6cf5;box-shadow:0 0 0 2px rgba(74,108,245,.15)}
.cfg-card-thumb{
  height:56px;background:#f5f6f8;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.cfg-card-thumb svg{width:24px;height:24px;color:#cdd1d8}
.cfg-card-info{padding:7px 9px}
.cfg-card-name{font-size:11px;font-weight:600;color:#1a1d23;line-height:1.2}
.cfg-card-meta{font-size:10px;color:#8d95a3;margin-top:2px}

/* ── Option items — List ── */
.cfg-opt-list{display:flex;flex-direction:column;gap:2px}
.cfg-list-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:6px;
  cursor:pointer;transition:all .12s;
}
.cfg-list-item:hover{background:#f5f6f8}
.cfg-list-item.active{background:#eff3ff}
.cfg-list-item-dot{
  width:8px;height:8px;border-radius:50%;
  border:2px solid #cdd1d8;flex-shrink:0;transition:all .15s;
}
.cfg-list-item.active .cfg-list-item-dot{
  border-color:#4a6cf5;background:#4a6cf5;
  box-shadow:inset 0 0 0 2px #fff;
}
.cfg-list-item-name{font-size:12px;font-weight:500;color:#1a1d23}
.cfg-list-item.active .cfg-list-item-name{color:#4a6cf5;font-weight:600}

/* ── Option items — Dropdown ── */
.cfg-opt-dropdown{padding:0 2px}
.cfg-opt-dropdown .fc-dropdown-btn{width:100%;font-size:12px}

/* ── Parameter controls in preview ── */
.cfg-param-wrap{padding:4px 0}
.cfg-param-label{font-size:11px;font-weight:600;color:#5f6878;margin-bottom:6px}
.cfg-param-slider{
  width:100%;height:4px;border-radius:2px;
  -webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,#4a6cf5 50%,#e2e5ea 50%);
  outline:none;cursor:pointer;
}
.cfg-param-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#4a6cf5;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15);
  cursor:pointer;
}
.cfg-param-toggle{
  display:flex;align-items:center;gap:8px;
}
.cfg-param-color{
  display:flex;align-items:center;gap:8px;
}
.cfg-param-color input[type="color"]{
  width:32px;height:32px;border:2px solid #e2e5ea;border-radius:8px;
  padding:0;cursor:pointer;overflow:hidden;
}
.cfg-param-color input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.cfg-param-color input[type="color"]::-webkit-color-swatch{border:none;border-radius:6px}
.cfg-param-color-hex{font-size:11.5px;font-weight:500;color:#5f6878}

/* ── Footer / CTA ── */
.cfg-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:#fff;
  border-top:1px solid #e9ebef;flex-shrink:0;
}
.cfg-price{
  font-size:18px;font-weight:800;color:#1a1d23;letter-spacing:-.02em;
}
.cfg-price-from{font-size:11px;font-weight:500;color:#8d95a3;margin-right:4px}
.cfg-cta{
  padding:9px 24px;border-radius:8px;border:none;
  background:#4a6cf5;color:#fff;font-size:13px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.cfg-cta:hover{background:#3a5ce0;box-shadow:0 4px 12px rgba(74,108,245,.3)}

/* ── Attribute label above options ── */
.cfg-attr-label{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#8d95a3;padding:0 0 8px;
}
.cfg-attr-selected{
  font-weight:500;text-transform:none;letter-spacing:0;color:#5f6878;
  margin-left:6px;font-size:11px;
}