/* =====================================================
   GLOBAL BASE
===================================================== */

body{
font-family:Arial, sans-serif;
background:#000;
color:#fff;
margin:0;
padding:20px;
}

/* =====================================================
   SECTION PANELS
===================================================== */

#sc-builder .section{
background:#3a3a3a;
border:1px solid #666;
padding:22px;
box-shadow:0 0 12px rgba(255,235,59,0.08);
}

/* =====================================================
   COMPONENT BOX
===================================================== */

#sc-builder .component-box{
width:310px;
height:550px;
overflow-y:auto;
}

#sc-builder .component-box h3{
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
color:#ffeb3b;
}
/* =====================================================
   GROUPS
===================================================== */

#sc-builder .v3-group{
margin-bottom:22px;
padding-bottom:14px;
border-bottom:1px solid rgba(255,255,255,0.06);
font-size:12px;
}

#sc-builder .v3-group label{
font-weight:bold;
color:#ccc;
margin-bottom:6px;
display:block;
}

#sc-builder .v3-panel{
background:#555;
padding:14px;
border-radius:4px;
margin-top:14px;
border:1px solid #666;
}

#sc-builder .v3-row{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
font-size:12px;
}

/* =====================================================
   SELECT INPUTS
===================================================== */

#sc-builder .dark-select{
width:100%;
font-size:11px;
background:#444;
color:#fff;
border:1px solid #777;
padding:4px;
}

#sc-builder select:hover{
  border-color:#ffeb3b;
}

#sc-builder select:focus{
  outline:none;
border-color:#ffeb3b;
box-shadow:0 0 4px rgba(255,235,59,0.6);
}

/* =====================================================
   COLOR PICKER
===================================================== */

#sc-builder .color-picker{
display:flex;
gap:8px;
margin-top:6px;
}

#sc-builder .color-circle{
width:18px;
height:18px;
border-radius:50%;
border:1px solid #777;
cursor:pointer;
}

#sc-builder .color-circle.selected{
border:2px solid #ffeb3b;
}

#sc-builder .bg-black{background:#000;}
#sc-builder .bg-white{background:#fff;}
#sc-builder .bg-cream{background:#f5f5dc;}
#sc-builder .bg-zebra{background:linear-gradient(90deg,#000 50%,#fff 50%);}
#sc-builder .bg-nocolor{
background:linear-gradient(45deg,#888,#ccc);
}

/* =====================================================
   PREVIEW
===================================================== */

#sc-builder .preview-column{
min-width:480px;
flex:0 0 auto;
}

#sc-builder .preview-box{
width:480px;
min-height:500px;
background:#000;
position:relative;
border-radius:8px;
padding:10px;
}

#sc-builder .product-image-area{
position:relative;
width:440px;
height:440px;
margin:0 auto;
background:#000;
overflow:hidden;
box-shadow:0 0 10px 5px #00FF41;

}

#sc-builder .layer{
position:absolute;
width:440px;
height:440px;
top:0;
left:0;
pointer-events:none;
transition:opacity 0.4s;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* =====================================================
   BUTTONS
===================================================== */

#sc-builder .analyze-btn,
#sc-builder .add-to-cart-btn{
background:#ffeb3b;
color:#000;
border:3px solid #000;
padding:15px;
width:100%;
font-size:16px;
font-weight:bold;
cursor:pointer;
text-transform:uppercase;
margin-top:25px;
border-radius:4px;
transition:.25s;
}

#sc-builder .analyze-btn:hover{
box-shadow:0 0 12px #ffeb3b;
}

#sc-builder .add-to-cart-btn{
display:none;
}

/* =====================================================
   TOOLTIP
===================================================== */

#sc-builder .config-tooltip{
position:fixed;
background:#ffeb3b;
color:#000;
padding:10px 12px;
border-radius:4px;
font-size:12px;
font-weight:bold;
max-width:220px;
line-height:1.4;
z-index:99999;
pointer-events:none;
display:none;
box-shadow:0 4px 12px rgba(0,0,0,0.5);
}

/* =====================================================
   UTILITIES
===================================================== */

#sc-builder .hidden{display:none;}
#sc-builder .cursor-pointer{cursor:pointer;}
#sc-builder .full-width{width:100%;}
#sc-builder .yellow-text{color:#ffeb3b;}

#pickup-configurator{
width:100%;
max-width:none;
}
#sc-builder .pickup-disabled{
opacity:0.45;
cursor:not-allowed;
position:relative;
pointer-events:auto;
}

#sc-builder .pickup-disabled:hover{
transform:none;
box-shadow:none;
border-color:#aa0000;
background:#333;
}

/* =====================================
BASEPLATE COLOR GRID
===================================== */

#sc-builder .baseplate-color-grid{
display:flex;
gap:14px;
margin-top:6px;
flex-wrap:nowrap;
}

#sc-builder .baseplate-option{
display:flex;
flex-direction:column;
align-items:center;
cursor:pointer;
font-size:10px;
color:#ccc;
}

#sc-builder .baseplate-option span{
margin-top:3px;
font-size:9px;
}

#sc-builder .baseplate-option.selected .color-circle{
border:2px solid #ffeb3b;
}

#sc-builder .baseplate-option.selected span{
color:#ffeb3b;
font-weight:bold;
}
/* =====================================================
   STAGE 1 — PICKUP SELECTOR
===================================================== */

#stage-1-container{
max-width:800px;
margin:20px auto;
background:#000;
padding:40px;
border:1px solid #FFA500;
border-radius:10px;
text-align:center;
}

#sc-builder .pickup-title{
font-size:18px;
margin-bottom:30px;
font-weight:bold;
text-transform:uppercase;
color:#ffeb3b;
}

#sc-builder .pickup-options{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

#sc-builder .pickup-item{
cursor:pointer;
text-align:center;
padding:20px;
border:1px solid #666;
border-radius:8px;
transition:.2s;
width:140px;
background:#333;
color:#fff;
}

#sc-builder .pickup-item:hover{
border-color:#ffeb3b;
transform:translateY(-5px);
background:#555;
box-shadow:0 0 10px #ffeb3b;
}

#sc-builder .pickup-item img{
width:60px;
display:block;
margin:0 auto 10px;
pointer-events:none;
}

#sc-builder .pickup-item span{
font-size:13px;
font-weight:bold;
}
/* =====================================================
   BUILD PROGRESS
===================================================== */

#build-progress{
display:flex;
align-items:center;
justify-content:center;
gap:15px;
margin-bottom:0px;
font-family:'VT323', monospace;
}

#pickup-configurator .progress-step{
display:flex;
align-items:center;
gap:6px;
color:#666;
transition:all .3s ease;
}

#pickup-configurator .step-number{
font-size:16px;
letter-spacing:1px;
}

#pickup-configurator .step-label{
font-size:12px;
}

#pickup-configurator .progress-line{
width:80px;
height:2px;
background:#333;
position:relative;
overflow:hidden;
}

#pickup-configurator .progress-fill{
position:absolute;
left:0;
top:0;
height:100%;
width:0%;
background:linear-gradient(90deg,#ffeb3b,#33ff00);
transition:width .4s ease;
}

#pickup-configurator .progress-step.active{
color:#ffeb3b;
text-shadow:0 0 6px rgba(255,235,59,0.6);
}

#pickup-configurator .progress-step.completed{
color:#33ff00;
}
/* =====================================================
   BUILDER ROW LAYOUT
===================================================== */

#sc-builder .builder-row{
display:flex;
align-items:flex-start;
gap:20px;
justify-content:center;
margin-top: 1px;
}

/* =====================================================
   RESPONSIVE LAYOUT
===================================================== */

/* 1️⃣ Medium screens (laptop) */
@media (max-width: 1400px) {

  #stage-2-area {
    flex-wrap: wrap;
    justify-content: center;
  }

  #sc-builder .preview-column {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

}

/* 2️⃣ Smaller laptops */
@media (max-width: 1100px) {

  #stage-2-area {
    flex-direction: column;
    align-items: center;
  }

#stage-2-area .component-box{
width:310px;
max-width:none;
}
#sc-builder .chosen-one-box {
  border: 1px solid rgba(255,235,59,0.6);
  box-shadow:
    0 0 14px rgba(255,235,59,0.7),
    0 0 28px rgba(255,235,59,0.35),
    inset 0 0 8px rgba(255,235,59,0.2);
}
  #sc-builder .preview-box {
    width: 100%;
    max-width: 500px;
  }

  #sc-builder .product-image-area,
  #sc-builder .layer {
    width: 100%;
    height: auto;
  }
}

/* =====================================================
   BASE / GLOBAL STYLES
===================================================== */

body {
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
  margin: 0;
  padding: 20px;
}


/* =====================================================
   STAGE 1 — PICKUP SELECTION
===================================================== */

#stage-1-container {
  max-width: 800px;
  margin: 20px auto;
  background-color: #000;
  padding: 40px;
  border: 1px solid #FFA500;
  border-radius: 10px;
  text-align: center;
}

#sc-builder .pickup-title {
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: #ffeb3b;
}

#sc-builder .pickup-options {
  display: flex;
  justify-content: center;
  gap: 30px;
}

#sc-builder .pickup-item {
  cursor: pointer;
  text-align: center;
  padding: 20px;
  border: 1px solid #666;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 140px;
  background: #333;
  color: #fff;
}

#sc-builder .pickup-item:hover {
  border-color: #ffeb3b;
  transform: translateY(-5px);
  background: #555;
  box-shadow: 0 0 10px #ffeb3b;
}

#sc-builder .pickup-item img {
  width: 60px;
  display: block;
  margin: 0 auto 10px;
  pointer-events: none;
}

#sc-builder .pickup-item span {
  font-size: 13px;
  font-weight: bold;
}


/* =====================================================
   STAGE 2 LAYOUT
===================================================== */

#stage-2-area {
display:flex;
opacity:0;
flex-direction:row;
align-items:flex-start;
gap:20px;
justify-content:flex-start;
}

#sc-builder .section {
  background-color: #444;
  color: #fff;
  padding: 15px;
  border: 1px solid #FFA500;
  border-radius: 0px;
}


/* =====================================================
   COMPONENT PANELS
===================================================== */

#sc-builder .component-box {
  width: 310px;
  height: 560px;
  overflow-y: auto;
}

#sc-builder .component-box h3 {
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: underline;
  margin-bottom: 15px;
  color: #ffeb3b;
}

#sc-builder .v3-group {
  margin-bottom: 22px;
  padding-bottom: 14px;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow: visible;
}

#sc-builder .v3-group label {
  font-weight: bold;
  color: #ccc;
  margin-bottom: 6px;
  display: block;
}
#sc-builder .v3-group label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

#sc-builder .v3-panel {
  background: #555;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  border: 1px solid #666;
}
/* Output wires käyttää samaa taustaa kuin winding schedule */
#outputWireGroup .v3-panel {
  background: #222;
  border: 1px solid #555;
}

#sc-builder .v3-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  align-items: center;
  font-size: 12px;
}


/* =====================================================
   CHOSEN PICKUP BOX
===================================================== */

#sc-builder .chosen-one-box {
  width: 180px;
  height: 220px;
    text-align: center;
  color: #ffeb3b;
  box-shadow: 0 0 10px #ffeb3b;
}

#sc-builder .chosen-one-box h2 {
  font-size: 12px;
  letter-spacing: 1px;
    margin: 16px auto;

}

#display-chosen-img {
  max-width: 100px;
  display: block;
  margin: 0 auto;
}

#display-chosen-style-select {
  width: 90%;
  margin-top: 5px;
  background: #333;
  color: #fff;
  border: 1px solid #ffeb3b;
  font-size: 12px;
  padding: 3px;
}

.presets-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 18px;
}

.presets-row select {
  background: #111;
  color: #fff;
  border: 1px solid #444;
  font-size: 12px;
  padding: 2px 4px;
}

/* =====================================================
   FORM ELEMENTS
===================================================== */

#sc-builder .small-select {
  background: #555;
  color: #fff;
  border: 1px solid #777;
  font-size: 11px;
}

#sc-builder .extra-small-select {
  background: #555;
  color: #fff;
  border: 1px solid #777;
  font-size: 10px;
}

#sc-builder .dark-select {
  width: 100%;
  font-size: 10px;
  margin-bottom: 5px;
  background: #444;
  color: #fff;
}
/* ===== Output wire dropdown style ===== */
#hotWireColor,
#groundWireColor {
  background: #555;
  color: #fff;
  border: 1px solid #777;
  font-size: 11px;
  padding: 2px 4px;
}

#sc-builder .schedule-container-bg {
  background: #222;
  padding: 8px;
  border: 1px solid #555;
  border-radius: 4px;
}

#sc-builder .total-rounds-info {
  margin-top: 8px;
  font-weight: bold;
  font-size: 11px;
  color: #ffeb3b;
}

#sc-builder .warning-text {
  color: #ff4444;
  font-size: 9px;
  font-weight: bold;
  display: none;
}

#sc-builder .winding-row select,
#sc-builder .winding-row input {
  font-size: 11px;
}

#sc-builder .winding-row input::placeholder {
  color: #aaa;
}

#spacingRange {
  accent-color: #ffeb3b;
}
/* ===== Yellow wire length sliders ===== */
#hotLength,
#groundLength {
  accent-color: #ffeb3b;
}

/* =====================================================
   COLOR PICKER
===================================================== */

#sc-builder .color-picker {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}

#sc-builder .color-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #777;
  cursor: pointer;
}

#sc-builder .color-circle.selected {
  border: 2px solid #ffeb3b;
}

#sc-builder .bg-black { background: #000; }
#sc-builder .bg-white { background: #fff; }
#sc-builder .bg-yellow { background: #ffeb3b; }
#sc-builder .bg-orange { background: #ff9800; }
/* =====================================================
   PREVIEW LAYOUT
===================================================== */

#sc-builder .preview-column {
  min-width: 480px;
  flex: 0 0 auto;
}

#sc-builder .preview-box {
  width: 480px;
  min-height: 500px;
  background: #000;
  position: relative;
}

#sc-builder .product-image-area {
  position: relative;
  width: 440px;
  height: 440px;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
  box-shadow: 0 0 10px 5px #00FF41;
}

#sc-builder .layer {
  position: absolute;
  width: 440px;
  height: 440px;
  top: 0;
  left: 0;
  pointer-events: none;
  transition: opacity 5.5s;
}


/* =====================================================
   PREVIEW TEXT + ANALYZE OVERLAYS
===================================================== */

#sc-builder .preview-text-box {
  position: absolute;
  z-index: 100;
  padding: 4px;
  background: #000;
  color: #33ff00;
    text-shadow:
  0 0 1px rgba(255,235,59,0.4),
  0 0 3px rgba(255,235,59,0.4),
  0 0 6px rgba(255,235,59,0.2);

  font-size: 14px;
  font-family: 'VT323', monospace;
  pointer-events: none;
  overflow: hidden;
}

#text-area-1 { top: 30px; left: 260px; width: 130px; height: 100px; }
#text-area-2 { top: 105px; left: 260px; width: 130px; height: 100px; white-space: nowrap; }
#text-area-3 { top: 185px; left: 260px; width: 130px; height: 100px; }
#text-area-4 { top: 250px; left: 260px; width: 130px; height: 100px; }
#text-area-5 { top: 320px; left: 260px; width: 150px; height: 100px; }
#text-area-6 { top: 380px; left: 260px; width: 160px; height: 80px;
}

#sc-builder .analyzing-container {
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #ffeb3b;
  text-shadow:
  0 0 1px rgba(255,235,59,0.4),
  0 0 3px rgba(255,235,59,0.4),
  0 0 6px rgba(255,235,59,0.2);

  z-index: 101;
  pointer-events: none;
  display: flex;
  gap: 10px;
}

#sc-builder .coming-soon-text {
  color: #ff4444;
}

#sc-builder .analyzing-text::after {
  content: "|";
  animation: blink 1s infinite;
  margin-left: 5px;
  color: #ffeb3b;
}

@keyframes blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0; }
}

#sc-builder .scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(51,255,1,0.3);
  box-shadow: 0 0 15px 1px #ffeb3b;
  z-index: 102;
  pointer-events: none;
  animation: scanMove 6s linear infinite;
  opacity: 0.7;
}

@keyframes scanMove {
  0% { top: 0; opacity: 0; }
  5% { opacity: 0.8; }
  95% { opacity: 0.8; }
  100% { top: 440px; opacity: 0; }
}

#sc-builder .glitch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: rgba(51,255,1,0.03);
  backdrop-filter: contrast(150%) brightness(120%) saturate(200%) blur(2px);
  z-index: 101;
  pointer-events: none;
  display: none;
}

@keyframes glitch-shake {
  0% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(-3px) skewX(2deg); }
  50% { transform: translateX(3px) skewX(-2deg); }
  75% { transform: translateX(-1px) skewX(1deg); }
  100% { transform: translateX(0) skewX(0deg); }
}


/* =====================================================
   SWITCH (TOGGLE)
===================================================== */

#sc-builder .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}

#sc-builder .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

#sc-builder .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #666;
  transition: .4s;
  border-radius: 18px;
}

#sc-builder .slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: .4s;
  border-radius: 50%;
}

#sc-builder .switch input:checked + .slider:before {
  transform: translateX(16px);
}


/* =====================================================
   BUTTONS
===================================================== */

#sc-builder .analyze-btn,
#sc-builder .add-to-cart-btn {
  background-color: #ffeb3b;
  color: #000;
  border: 3px solid #000;
  padding: 15px;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  margin-top: 25px;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

#sc-builder .add-to-cart-btn {
  display: none;
}

#sc-builder .analyze-btn:disabled {
  background-color: #444;
  color: #888;
  cursor: not-allowed;
  opacity: 0.6;
}

@keyframes pulseReady {
  0% { box-shadow: 0 0 8px #ffeb3b; transform: scale(1); }
  50% { box-shadow: 0 0 25px #ffeb3b; transform: scale(1.02); }
  100% { box-shadow: 0 0 8px #ffeb3b; transform: scale(1); }
}

#sc-builder .pulse-ready {
  animation: pulseReady 1.5s infinite ease-in-out;
  background-color: #ffff00;
}

#sc-builder .flying-icon {
  position: fixed;
  z-index: 9999;
  transition: all 1.7s cubic-bezier(0.175,0.885,0.32,1.275);
  pointer-events: none;
  filter: drop-shadow(0 0 10px #ffeb3b);
}

#sc-builder .fade-out {
  opacity: 0;
  pointer-events: none;
}


/* =====================================================
   TOOLTIP
===================================================== */

#pickup-tooltip {
  display: none;
  position: fixed;
  background: #ffeb3b;
  color: #000;
  padding: 10px 12px;
  border-radius: 4px;

  font-size: 12px;
  font-weight: bold;
  line-height: 1.35;
  margin-top: -20px;

  white-space: pre-line;

  z-index: 10001;
  pointer-events: none;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.5),
    0 0 10px rgba(255,235,59,0.5);
}
/* =====================================================
   UNIVERSAL TOOLTIP ENGINE
===================================================== */

.config-tooltip {
    position: fixed;
  background: #ffeb3b;
  color: #000;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  max-width: 220px;
  line-height: 1.4;
  z-index: 99999;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* =====================================================
   UTILITIES
===================================================== */

#sc-builder .hidden { display: none; }

#sc-builder .disabled-look {
  opacity: 0.3;
  pointer-events: none;
}

#sc-builder .flex-row-gap {
  display: flex;
  gap: 15px;
}

#sc-builder .flex-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#sc-builder .flex-row-between.hidden {
  display: none;
}

#sc-builder .cursor-pointer { cursor: pointer; }
#sc-builder .full-width { width: 100%; }
#sc-builder .yellow-text { color: #ffeb3b; }

#sc-builder .dir-active {
  color: #ffeb3b !important;
  font-weight: bold;
}

#sc-builder .dir-inactive {
  color: #888 !important;
}
/* =====================================================
   RANGE SLIDER — REAL FINAL FIX
===================================================== */

/* Base */
#sc-builder input[type="range"]{
    -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: transparent;
  cursor: pointer;
  outline: none;            /* ← POISTAA mustan borderin */
}

/* Focus state (oma glow accessibilityä varten) */
#sc-builder input[type="range"]:focus {
  outline: none;
}

#sc-builder input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 10px #ffeb3b;
}

#sc-builder input[type="range"]:focus::-moz-range-thumb {
  box-shadow: 0 0 10px #ffeb3b;
}


/* TRACK */
#sc-builder input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #777;
  border-radius: 3px;
}

#sc-builder input[type="range"]::-moz-range-track {
  height: 6px;
  background: #777;
  border-radius: 3px;
}


/* THUMB */
#sc-builder input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffeb3b;
  margin-top: -5px;
  transition: box-shadow 0.2s ease;
}

#sc-builder input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ffeb3b;
  transition: box-shadow 0.2s ease;
}

/* Hover glow */
#sc-builder input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 0 8px #ffeb3b;
}

#sc-builder input[type="range"]::-moz-range-thumb:hover {
  box-shadow: 0 0 8px #ffeb3b;
}
/* =====================================================
   PANEL VISUAL POLISH
===================================================== */

#sc-builder .section {
  background: #3a3a3a;
  border: 1px solid #666;
  box-shadow: 0 0 12px rgba(255,235,59,0.08);
}

#sc-builder .component-box h3 {
  font-size: 14px;
  letter-spacing: 1px;
}

#sc-builder .v3-group label {
  color: #ccc;
}

#sc-builder .preview-box {
  padding: 10px;
}

select:hover {
  border-color: #ffeb3b;
}

#sc-builder .analyze-btn:hover {
  box-shadow: 0 0 12px #ffeb3b;
}

#sc-builder .chosen-one-box {
  border-width: 2px;
  border: 1px solid rgba(255,235,59,0.4);
  box-shadow:
    0 0 8px rgba(255,235,59,0.35),
    inset 0 0 6px rgba(255,235,59,0.12);
}


/* =====================================================
   BUILD PROGRESS INDICATOR
===================================================== */

#build-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 6px;
  font-family: 'VT323', monospace;
}

#pickup-configurator .progress-step {
  display: flex;
  flex-direction: row;   /* ← tämä muuttaa yhdelle riville */
  align-items: center;
  gap: 6px;              /* väli numeron ja tekstin väliin */
  color: #666;
  transition: all 0.3s ease;
}

#pickup-configurator .progress-step .step-number {
  font-size: 16px;
  letter-spacing: 1px;
}

#pickup-configurator .progress-step .step-label {
  font-size: 12px;
}

#pickup-configurator .progress-line {
  width: 60px;
  height: 2px;
  background: #444;
}

#pickup-configurator .progress-step.active {
  color: #ffeb3b;
  text-shadow: 0 0 6px rgba(255,235,59,0.6);
}

#pickup-configurator .progress-step.completed {
  color: #33ff00;
}

#pickup-configurator .progress-step.completed .step-number::after {
  content: "";
}
/* viivan container */
#pickup-configurator .progress-line {
  width: 80px;
  height: 2px;
  background: #333;
  position: relative;
  overflow: hidden;
}

/* täyttyvä osa */
#pickup-configurator .progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffeb3b, #33ff00);
  transition: width 0.4s ease;
}
/* =====================================================
   PREMIUM PANEL SPACING & ALIGNMENT
===================================================== */

/* yhtenäinen panel spacing */
#sc-builder .section {
  padding: 22px;
  border-radius: 0px;
}
/* vain nämä kaksi saavat pyöristyksen */
#sc-builder .chosen-one-box,
#sc-builder .preview-box {
  border-radius: 8px;

}

/* panel header yhtenäiseksi */
#sc-builder .component-box h3 {
  min-height: 32px;        /* sama header korkeus */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

/* panelin sisäinen rytmi */
#sc-builder .v3-panel {
  margin-top: 14px;
  padding: 14px;
}

/* input rivien spacing */
#sc-builder .v3-row {
  margin-bottom: 10px;
}
/* =====================================================
   CONFIGURATOR TOOLTIP
===================================================== */

.config-tooltip {
    position: fixed;
  background: #ffeb3b;
  color: #000;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  max-width: 220px;
  line-height: 1.35;
  margin-top: -25px;

  white-space: pre-line;

  z-index: 99999;
  pointer-events: none;

  opacity: 1;
  transform: translateY(0);

  transition: opacity 0.18s ease, transform 0.18s ease;

  box-shadow:
    0 4px 10px rgba(0,0,0,0.5),
    0 0 10px rgba(255,235,59,0.5);
}

.config-tooltip {
    display: none;
}

#sc-builder .config-tooltip.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================
   DROPDOWN — PREMIUM WHITE STYLE
===================================================== */



/* hover */
select:hover {
  border-color: #ffeb3b !important;
}

/* focus */
select:focus {
  outline: none;
  border-color: #ffeb3b !important;
  box-shadow: 0 0 4px rgba(255,235,59,0.6);
}

/* dropdown list options */
#sc-builder select option {
  background: #fff;
  color: #000;
}
/* =====================================================
   OUTPUT WIRE ROW ALIGNMENT FIX
===================================================== */

/* Hot / Ground rivit lähemmäksi toisiaan */
#outputWireGroup .v3-row {
  justify-content: flex-start;
  gap: 8px;
}

/* label ei veny */
#outputWireGroup .v3-row span {
  min-width: 70px;
}
/* =====================================================
   STAGE 3 — ANALYZE MODE SCANLINE
===================================================== */

#sc-builder .scan-line.analyze-mode {
  background: rgba(255,0,0,0.6);
  box-shadow: 0 0 18px 3px #ff0000;
animation: scanMoveFast 0.9s linear 3;}

@keyframes scanMoveFast {

  /* start */
  0% { top: 0; opacity: 0; }
  5% { opacity: 1; }

  /* first scan area */
  15% { top: 80px; }
  20% { top: 80px; }

  /* second scan area */
  35% { top: 160px; }
  40% { top: 160px; }

  /* third scan area */
  60% { top: 260px; }
  65% { top: 260px; }

  /* final sweep */
  100% { top: 440px; opacity: 0; }
}
/* =====================================================
   STAGE 3 — LOCK UI DURING ANALYZE
===================================================== */

/* =====================================================
   STAGE 3 — LOCK UI DURING ANALYZE (HARD LOCK)
===================================================== */

body.analyze-lock #stage-2-area,
body.analyze-lock #stage-2-area * {
  pointer-events: none !important;
}

body.analyze-lock #stage-2-area {
  opacity: 0.6;
}

/* preview pysyy kirkkaana */
body.analyze-lock .product-image-area,
body.analyze-lock .product-image-area * {
  opacity: 1;
}

/* analyze button ei klikattavissa uudestaan */
body.analyze-lock .analyze-btn {
  opacity: 0.5;
}
/* Stage 4 price display */

#text-area-price {
  bottom: 20px;
  left: 20px;
  width: 200px;
  font-size: 22px;
  color: #ffeb3b;
}
/* =====================================================
   PREMIUM ANALYZE — TEXT FLICKER
===================================================== */

body.analyze-lock .preview-text-box {
  animation: analyzeTextFlicker 0.12s infinite alternate;
}

@keyframes analyzeTextFlicker {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}
/* =====================================================
   PREMIUM ANALYZE — SUCCESS FLASH
===================================================== */

#sc-builder .success-flash {
  animation: successFlash 0.15s ease-out;
}

@keyframes successFlash {
  0% {
    box-shadow: 0 0 0px rgba(255,255,255,0);
  }
  50% {
    box-shadow: 0 0 60px 25px rgba(255,255,255,0.9);
  }
  100% {
    box-shadow: 0 0 0px rgba(255,255,255,0);
  }
}
/* =====================================================
   PREMIUM ANALYZE — ERROR BURST
===================================================== */

#sc-builder .error-flash {
  animation: errorFlash 0.2s ease-out;
}

@keyframes errorFlash {
  0% {
    box-shadow: 0 0 0px rgba(255,0,0,0);
  }
  40% {
    box-shadow: 0 0 60px 25px rgba(255,0,0,0.9);
  }
  100% {
    box-shadow: 0 0 0px rgba(255,0,0,0);
  }
}
/* ===== COIL FILL PREMIUM BAR ===== */

/* ===== COIL FILL PREMIUM STATES ===== */

#sc-builder .coil-fill-label {
  font-size: 11px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

/* state colors */
#sc-builder .coil-fill-label.underwound { color: #4fc3f7; }
#sc-builder .coil-fill-label.optimal { color: #ffeb3b; }
#sc-builder .coil-fill-label.danger { color: #ff5252; }

/* base bar */
#sc-builder .coil-fill-bar {
  width: 100%;
  height: 8px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}

/* UNDERWOUND → cool blue */
#sc-builder .coil-fill-progress.underwound {
  background: linear-gradient(90deg, #29b6f6, #0288d1);
  box-shadow: 0 0 6px rgba(41,182,246,0.7);
}

/* OPTIMAL → premium gold */
#sc-builder .coil-fill-progress.optimal {
  background: linear-gradient(90deg, #ffeb3b, #ffc107, #ff9800);
  box-shadow: 0 0 6px rgba(255,193,7,0.7);
}

/* DANGER → red + pulse */
#sc-builder .coil-fill-progress.danger {
  background: linear-gradient(90deg, #ff5252, #d50000);
  box-shadow: 0 0 10px rgba(255,82,82,0.9);
  animation: coilPulse 1.2s infinite;
}

/* pulse animation */
@keyframes coilPulse {
  0% { box-shadow: 0 0 6px rgba(255,82,82,0.6); }
  50% { box-shadow: 0 0 16px rgba(255,82,82,1); }
  100% { box-shadow: 0 0 6px rgba(255,82,82,0.6); }
}
/* ===== COIL SUMMARY ROW ===== */

#sc-builder .coil-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
}

/* TOTAL text */
#sc-builder .coil-total {
  color: #ffeb3b;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Fill wrapper */
#sc-builder .coil-fill-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

/* Percentage text */
#sc-builder .coil-fill-text {
  font-size: 10px;
  width: 32px;
  text-align: right;
}

/* Bar */
#sc-builder .coil-fill-bar {
  width: 100px;
  height: 6px;
  background: #333;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.6);
}

#sc-builder .coil-fill-progress {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* =====================================================
   COMING SOON OVERLAY
===================================================== */

/* =====================================================
   GLOBAL COMING SOON OVERLAY
===================================================== */

#stage-2-area {
  position: relative;
}

#sc-builder .coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 80px;
  font-weight: bold;
  color: #ffeb3b;
  font-family: 'VT323', monospace;
  letter-spacing: 4px;
  text-shadow: 0 0 25px rgba(255,235,59,0.9);
  z-index: 999;
  pointer-events: none;
}

#sc-builder .coming-soon-overlay.hidden {
  display: none;
}

body.coming-soon-lock #sc-customization,
body.coming-soon-lock .preview-column {
  pointer-events: none;
  opacity: 0.25;
}

body.coming-soon-lock .product-image-area,
body.coming-soon-lock .product-image-area * {
  opacity: 1;
}
/* =====================================================
   MOUNTING FINISH GRID
===================================================== */

#sc-builder .mounting-finish-grid {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

#sc-builder .finish-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-size: 11px;
  color: #ccc;
  transition: all 0.2s ease;
}

#sc-builder .finish-option .color-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #777;
  margin-bottom: 4px;
}

#sc-builder .finish-option.selected .color-circle {
  border: 2px solid #ffeb3b;
}

#sc-builder .finish-option.selected .finish-label {
  color: #ffeb3b;
  font-weight: bold;
}
/* Tooltip trigger hover hint */
#sc-builder .info-trigger:hover {
  color: #ffeb3b;
  cursor: help;
}
/* Tooltip hover for radio options */
#sc-builder .cursor-pointer.info-trigger:hover small {
  color: #ffeb3b;
}
#sc-builder .builder-disabled {
  filter: blur(2px);
  opacity: 0.4;
}
#sc-builder .finish-chrome {
  background: linear-gradient(
    145deg,
    #f0f0f0,
    #bdbdbd
  );
}
#sc-builder .finish-gold {
  background: linear-gradient(
    145deg,
    #ffd700,
    #c9a000
  );
}
#sc-builder .success-flash {
  animation: pickupFlash 0.25s ease-out;
}

@keyframes pickupFlash {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}
#sc-builder .layer {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* ======================================
   ADD TO CART – FINAL CTA GLOW
====================================== */

#sc-builder .add-to-cart-btn {
    position: relative;
    transition: all 0.25s ease;
}

#sc-builder .add-to-cart-btn.final-ready {
    background: linear-gradient(180deg,#ffeb3b,#ffc107);
    color: #000;
    font-weight: 700;
    box-shadow:
        0 0 10px rgba(255,235,59,0.6),
        0 0 20px rgba(255,235,59,0.4),
        inset 0 0 6px rgba(255,255,255,0.6);
}

#sc-builder .add-to-cart-btn.final-ready:hover {
    box-shadow:
        0 0 14px rgba(255,235,59,0.9),
        0 0 28px rgba(255,235,59,0.6),
        inset 0 0 8px rgba(255,255,255,0.8);
    transform: translateY(-1px);
}
/* ======================================
   ADD TO CART – ENERGY PULSE
====================================== */

@keyframes sc-cart-pulse {

  0% {
    box-shadow:
      0 0 8px rgba(255,235,59,0.6),
      0 0 16px rgba(255,235,59,0.3);
  }

  50% {
    box-shadow:
      0 0 16px rgba(255,235,59,1),
      0 0 32px rgba(255,235,59,0.7);
  }

  100% {
    box-shadow:
      0 0 8px rgba(255,235,59,0.6),
      0 0 16px rgba(255,235,59,0.3);
  }

}

#sc-builder .add-to-cart-btn.final-ready {

  background: linear-gradient(180deg,#ffeb3b,#ffc107);
  color:#000;
  font-weight:700;

  animation: sc-cart-pulse 2.2s infinite ease-in-out;

  transition: all 0.25s ease;
}

#sc-builder .add-to-cart-btn.final-ready:hover {

  transform: translateY(-2px) scale(1.02);

  box-shadow:
    0 0 20px rgba(255,235,59,1),
    0 0 40px rgba(255,235,59,0.9);

}
/* FORCE CHOSEN ONE GLOW */

#sc-builder .chosen-one-box{
border:1px solid rgba(255,235,59,0.6) !important;

box-shadow:
0 0 5px rgba(255,235,59,0.8),
0 0 10px rgba(255,235,59,0.45),
inset 0 0 10px rgba(255,235,59,0.25) !important;
}
.sc-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#pickup-name-preview{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:#ffeb3b;
  letter-spacing:1px;
  pointer-events:none;
  opacity:0.9;
  white-space:nowrap;
  max-width:80%;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

/* =====================================================
   SC TONE LAB HELP BUTTONS — TERMINAL GREEN
===================================================== */

#sc-builder .sc-tl-help-btn {

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:18px;
  height:18px;

  margin-left:8px;

  border:none;
  border-radius:50%;

  background:#00d47a;
  color:#04110b;

  font-size:10px;
  font-weight:bold;
  line-height:1;

  cursor:pointer;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;

  box-shadow:
    0 0 6px rgba(0,212,122,0.35);
}

#sc-builder .sc-tl-help-btn:hover {

  transform:translateY(-1px) scale(1.06);

  background:#00f08a;

  box-shadow:
    0 0 10px rgba(0,240,138,0.95),
    0 0 18px rgba(0,240,138,0.45),
    0 0 30px rgba(0,240,138,0.18);
}

#sc-builder .sc-tl-help-btn:active {
  transform:scale(0.96);
}

#sc-builder .sc-label-row {
  display:flex;
  align-items:center;
}

/* =====================================================
   SC TONE LAB OVERLAY
===================================================== */

.sc-tl-overlay {

  position: fixed;
  inset: 0;

  z-index: 999999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;

}

.sc-tl-overlay.hidden {

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

}

/* BACKGROUND */

.sc-tl-overlay-bg {

  position: absolute;
  inset: 0;

  background: rgba(0,0,0,0.82);

  backdrop-filter: blur(8px);

}

/* WINDOW */

.sc-tl-overlay-window {

  position: relative;

  width: min(1200px, 92vw);
  height: min(88vh, 900px);

  background: #111;

  border: 1px solid #444;
  border-radius: 16px;

  overflow: hidden;

  box-shadow:
    0 0 60px rgba(0,0,0,0.6);

  z-index: 2;

}

/* CONTENT */

.sc-tl-overlay-content {

  width: 100%;
  height: 100%;

  overflow-y: auto;

  padding: 40px;

  color: #fff;

}

/* CLOSE BUTTON */

.sc-tl-close-btn {

  position: absolute;

  top: 14px;
  right: 14px;

  width: 36px;
  height: 36px;

  border: none;
  border-radius: 50%;

  background: #222;
  color: #fff;

  font-size: 20px;
  cursor: pointer;

  z-index: 5;

}

.sc-tl-close-btn:hover {

  background: #333;

}

/* =====================================================
   SC TONE LAB CONTENT FIXES
===================================================== */

#sc-tl-overlay .sc-tl-overlay-window {

  overflow: hidden;

}

#sc-tl-overlay .sc-tl-overlay-content {

  overflow-y: auto;

  max-height: 85vh;

  padding: 28px;

}

/* MATCH ORIGINAL TONE LAB TYPOGRAPHY */

#sc-tl-overlay #tone-lab {

  font-size: 16px;
  line-height: 1.5;

}

/* REMOVE CARD LOOK INSIDE OVERLAY */

#sc-tl-overlay .tl-card {

  border: none;
  background: transparent;
  padding: 0;
  margin: 0;

}

#sc-tl-overlay .tl-card-header {

  margin-bottom: 24px;

}

/* =====================================================
   TEST — REMOVE INNER MAGNET PANEL
===================================================== */

#sc-builder .v3-panel{

background:transparent !important;

border:none !important;

padding:0 !important;

margin-top:0 !important;

border-radius:0 !important;

box-shadow:none !important;

}

/* =====================================================
   MAGNET AREA — MORE HORIZONTAL SPACE
===================================================== */

#sc-builder .pole-row{

display:flex;
align-items:center;
gap:8px;

}

#sc-builder .pole-row select{

min-width:0;
flex:1;

}

#sc-builder .pole-row span{

width:34px;
flex:0 0 34px;

}

/* =====================================================
   SLUG AREA — MORE HORIZONTAL SPACE
===================================================== */

#sc-builder .slug-row{

display:flex;
align-items:center;
gap:8px;

}

#sc-builder .slug-row select{

min-width:0;
flex:1;

}

#sc-builder .slug-row span{

width:52px;
flex:0 0 52px;

}

/* =====================================================
   MAGNET / SLUG DROPDOWNS — CLEANER UI
===================================================== */

#sc-builder .pole-row select,
#sc-builder .slug-row select{

height:24px;

padding:0 8px;

background:#2b2b2b;

color:#f5f5f5;

border:1px solid #5e5e5e;

font-size:10px;

border-radius:4px;

box-sizing:border-box;

}

/* hover */

#sc-builder .pole-row select:hover,
#sc-builder .slug-row select:hover{

border-color:#ffeb3b;

}

/* focus */

#sc-builder .pole-row select:focus,
#sc-builder .slug-row select:focus{

outline:none;

border-color:#ffeb3b;

box-shadow:0 0 6px rgba(255,235,59,0.35);

}

/* =====================================================
   MAGNET ROW — SMART SELECT WIDTHS
===================================================== */

/* magnet material */

#sc-builder .indiv-psel-mag{

flex:1.35;

}

/* profile */

#sc-builder .indiv-psel-profile{

flex:0.7;

}

/* height */

#sc-builder .indiv-psel-height{

flex:1;

}

/* diameter */

#sc-builder .indiv-psel-diameter{

flex:0.85;

}

/* slug height */

#sc-builder .indiv-ssel-height{

flex:1.2;

}

/* slug diameter */

#sc-builder .indiv-ssel-diameter{

flex:0.9;

}

/* =====================================================
   MAGNET / SLUG COLUMN WIDTH FIX
===================================================== */

/* korkeus-select leveämmäksi */

#sc-builder #polePanel .v3-row select:nth-child(4),
#sc-builder #barPanel .v3-row select:nth-child(4){

min-width:92px;

flex:1.4;

}

/* muut selectit hieman kompaktimmiksi */

#sc-builder #polePanel .v3-row select:not(:nth-child(4)),
#sc-builder #barPanel .v3-row select:not(:nth-child(4)){

flex:0.9;

min-width:58px;

}

/* =====================================================
   MAGNET / SLUG ROW GAP TIGHTEN
===================================================== */

#sc-builder #polePanel .v3-row,
#sc-builder #barPanel .v3-row{

gap:2px;

}
/* =====================================================
   UNIFORM MODE → DISABLE INDIVIDUAL ROWS
===================================================== */

/* Pole magnets */

#polePanel.uniform-active .pole-row{

opacity:0.38;

pointer-events:none;

filter:grayscale(0.35);

transition:opacity 0.2s ease;

}

/* Bar slug rows */

#barPanel.uniform-active .slug-row{

opacity:0.38;

pointer-events:none;

filter:grayscale(0.35);

transition:opacity 0.2s ease;

}

/* =====================================================
   PREMIUM PANEL HEADERS
===================================================== */

#sc-builder .component-box h3{

position:relative;

display:flex;
align-items:center;
justify-content:center;

margin:0 0 24px;

padding-bottom:14px;

font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;

color:#ffe95a;

text-align:center;

text-shadow:
0 0 6px rgba(255,235,59,0.35),
0 0 14px rgba(255,235,59,0.12);

}

/* subtle line */

#sc-builder .component-box h3::after{

content:"";

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

width:140px;
height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,235,59,0.9),
transparent
);

box-shadow:
0 0 10px rgba(255,235,59,0.35);

}

#sc-builder .component-box h3 {
    margin-top: -10px;
}

.preview-panel-title {

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;

    color: #00ff66;

    margin-top: -8px;
    margin-bottom: 14px;

}

/* =====================================================
   PREMIUM SECTION DIVIDERS
===================================================== */

#sc-builder .v3-group{

border-bottom:
1px solid rgba(255,235,59,0.16) !important;

padding-bottom:18px;
margin-bottom:22px;

position:relative;

}

/* subtle glow line */

#sc-builder .v3-group::after{

content:"";

position:absolute;

left:0;
bottom:-1px;

width:100%;
height:1px;

background:
linear-gradient(
90deg,
transparent,
rgba(255,235,59,0.45),
transparent
);

pointer-events:none;

}

/* =====================================================
   REMOVE LAST DIVIDER
===================================================== */

#panel-0 .v3-group:last-child,
#panel-1 .v3-group:last-child,
#panel-2 .v3-group:last-child{

border-bottom:none !important;

margin-bottom:0;
padding-bottom:0;

}

#panel-0 .v3-group:last-child::after,
#panel-1 .v3-group:last-child::after,
#panel-2 .v3-group:last-child::after{

display:none;

}

/* =====================================================
   REMOVE PRESET DIVIDER FROM CHOSEN PANEL
===================================================== */

.chosen-one-box .v3-group{

border-bottom:none !important;
padding-bottom:0 !important;
margin-bottom:0 !important;

}

.chosen-one-box .v3-group::after{

display:none !important;

}

/* =====================================================
   CHOSEN ONE PANEL — PREMIUM POLISH
===================================================== */

.chosen-one-box{

display:flex;
flex-direction:column;
align-items:center;

padding:2px 18px !important;

}

/* ---------- TITLE ---------- */

.chosen-one-box h2{

font-size:19px;
letter-spacing:2px;
font-weight:700;

margin-bottom:18px;

text-transform:uppercase;

color:#ffe95a;

text-shadow:
0 0 6px rgba(255,235,59,0.25);

}

/* ---------- PICKUP IMAGE ---------- */

#display-chosen-img{

width:78px;
height:auto;

margin-bottom:18px;

filter:
drop-shadow(0 10px 12px rgba(0,0,0,0.45));

transition:transform .25s ease;

}

#display-chosen-img:hover{

transform:scale(1.04);

}

/* ---------- DROPDOWNS ---------- */

.chosen-one-box select{

margin-bottom:10px;

}

/* ---------- PRESET LABEL ---------- */

.chosen-one-box label{

font-size:11px;
letter-spacing:.5px;

margin-bottom:6px !important;

color:#d8d8d8;

}

/* ---------- PRESET GROUP ---------- */

.chosen-one-box .v3-group{

width:100%;

display:flex;
flex-direction:column;
align-items:center;

gap:4px;

}

/* ---------- SELECT STYLE ---------- */

.chosen-one-box .dark-select,
#display-chosen-style-select{

height:26px;

font-size:10px;
padding:2px 6px;

border:
1px solid rgba(255,235,59,0.55);

background:#4a4a4a;

transition:
border-color .2s ease,
box-shadow .2s ease;

}

.chosen-one-box select:hover{

border-color:#ffeb3b;

box-shadow:
0 0 8px rgba(255,235,59,0.18);

}

/* =====================================================
   FIREFOX SELECT FIX
===================================================== */

.chosen-one-box select{

background:#4a4a4a !important;

border:1px solid rgba(255,235,59,0.45) !important;

box-shadow:none !important;

outline:none !important;

}

/* Firefox specific */

@-moz-document url-prefix() {

.chosen-one-box select{

background-image:none !important;

}

}

#sc-builder .chosen-one-box > .v3-group{

border-bottom:none !important;

}

/* =====================================================
   SC TONE LAB HELP BUTTONS — SUBTLE
===================================================== */

#sc-builder .sc-tl-help-btn {

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:auto;
  height:16px;

  padding:0 7px;

  margin-left:6px;

  border:
  1px solid rgba(0,212,122,0.38);

  border-radius:999px;

  background:
  rgba(0,212,122,0.08);

  color:
  rgba(120,255,190,0.82);

  font-size:8px;
  font-weight:700;

  letter-spacing:0.5px;
  text-transform:uppercase;

  cursor:pointer;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;

  box-shadow:
    0 0 5px rgba(0,212,122,0.08);

}

/* ---------- HOVER ---------- */

#sc-builder .sc-tl-help-btn:hover {

  transform:translateY(-1px);

  border-color:
  rgba(0,240,138,0.7);

  background:
  rgba(0,240,138,0.14);

  color:#b8ffd8;

  box-shadow:
    0 0 10px rgba(0,240,138,0.18);

}

/* =====================================================
   LAPTOP HEIGHT OPTIMIZATION
===================================================== */

/* REMOVE OLD PREVIEW-ONLY SCALING */

@media (max-width:1450px){

  .preview-column{

    width:auto !important;
    min-width:unset !important;

  }

  .preview-box{

    overflow:hidden;

  }

  .product-image-area{

    zoom:1;

  }

}

/* =====================================================
   SCALE ENTIRE BUILDER ONLY ON LAPTOPS
===================================================== */

@media (max-width:1450px) and (max-height:900px){

  #sc-builder{

    zoom:0.88;

  }

}

/* EXTRA SMALL LAPTOPS */

@media (max-width:1450px) and (max-height:820px){

  #sc-builder{

    zoom:0.86;

  }

}


/* =====================================================
   PICKUP DESIGN AI
===================================================== */

#sc-builder .ai-box{

width:105%;

margin-top:0;

padding:11px;

border:1px solid rgba(0,255,65,0.18);

background:
linear-gradient(
180deg,
rgba(0,0,0,0.92),
rgba(20,20,20,0.96)
);

box-shadow:
0 0 4px rgba(0,255,65,0.04),
inset 0 0 2px rgba(0,255,65,0.03);

border-radius:8px;

overflow:hidden;

box-sizing:border-box;

animation: aiBoxPulse 4s ease-in-out infinite;
}

#sc-builder .ai-box h2{

margin:0 0 12px 0;

font-size:10px;

letter-spacing:1.5px;

text-align:center;

color:#ffeb3b;

text-transform:uppercase;
}

/* =====================================
   LEFT COLUMN STACK
===================================== */

#sc-builder .builder-left-column{

display:flex;

flex-direction:column;

gap:14px;

width:210px;

flex-shrink:0;

align-self:flex-start;
}

/* =====================================
   TAGS
===================================== */

#sc-builder .ai-tags{

display:flex;

flex-wrap:wrap;

gap:6px;

justify-content:center;

margin-bottom:14px;
}

#sc-builder .ai-tag{

font-size:9px;

letter-spacing:0.8px;

padding:5px 7px;

border:1px solid rgba(51,255,0,0.22);

background:rgba(0,0,0,0.65);

color:#9eff9e;

font-family:'VT323', monospace;

text-transform:uppercase;

box-shadow:
0 0 6px rgba(51,255,0,0.08);

white-space:nowrap;
}

/* =====================================
   QUICK ACTIONS
===================================== */

#sc-builder .ai-question-row{

display:flex;

gap:6px;

justify-content:center;

margin-bottom:12px;

flex-wrap:wrap;
}

#sc-builder .ai-chip{

background:#111;

border:1px solid #555;

color:#ccc;

font-size:10px;

padding:5px 7px;

cursor:pointer;

transition:all .18s ease;
}

#sc-builder .ai-chip:hover{

border-color:#33ff00;

color:#33ff00;

box-shadow:
0 0 8px rgba(51,255,0,0.22);
}

/* =====================================
   INPUT
===================================== */

#sc-builder .ai-mini-input{

width:100%;

background:#050505;

border:1px solid #444;

color:#33ff00;

padding:8px;

font-size:11px;

box-sizing:border-box;

outline:none;

font-family:Arial,sans-serif;

transition:
border-color .2s ease,
box-shadow .2s ease;
}

#sc-builder .ai-mini-input:focus{

border-color:#33ff00;

box-shadow:
0 0 8px rgba(51,255,0,0.2);
}

#sc-builder .ai-mini-input::placeholder{

color:#666;
}

/* =====================================
   AI INSIGHT TEXT
===================================== */

#sc-builder .ai-insight-text{

margin-top:10px;

margin-bottom:14px;

padding:8px;

border:1px solid rgba(255,255,255,0.05);

background:rgba(255,255,255,0.02);

font-size:10px;

line-height:1.45;

color:#a8a8a8;

text-align:center;
}

@keyframes aiBoxPulse{

0%{
box-shadow:
0 0 10px rgba(0,255,65,0.10),
inset 0 0 8px rgba(0,255,65,0.04);
}

50%{
box-shadow:
0 0 14px rgba(0,255,65,0.18),
inset 0 0 10px rgba(0,255,65,0.06);
}

100%{
box-shadow:
0 0 10px rgba(0,255,65,0.10),
inset 0 0 8px rgba(0,255,65,0.04);
}

}

/* =====================================
   AI COLLAPSE
===================================== */

#sc-builder .ai-box-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:10px;
}

#sc-builder .ai-box-title{

font-size:10px;

letter-spacing:1.5px;

color:#ffeb3b;

text-transform:uppercase;
}

#sc-builder .ai-toggle-btn{

background:none;

border:none;

color:#33ff00;

font-size:18px;

line-height:1;

cursor:pointer;

padding:0;

transition:
transform .2s ease,
opacity .2s ease;
}

#sc-builder .ai-toggle-btn:hover{

opacity:0.7;
}

#sc-builder .ai-box-body{

max-height:700px;

overflow:hidden;

transition:
max-height .28s ease,
opacity .2s ease;

opacity:1;
}

#sc-builder .ai-box.collapsed .ai-box-body{

max-height:0;

opacity:0;

pointer-events:none;

margin-top:0;
}

#sc-builder .ai-box.collapsed{

padding:10px 11px;

min-height:auto;
}

/* =====================================
   AI RESPONSE AREA
===================================== */

#sc-builder .ai-response-area{

margin-top:12px;

padding:10px;

border:1px solid rgba(0,255,65,0.12);

background:rgba(0,0,0,0.35);

font-size:11px;

line-height:1.55;

color:#b7ffb7;

min-height:44px;

white-space:pre-wrap;

display:none;
}

#sc-builder .ai-insight-text{

display:none;
}

/* =====================================
   AI CHAT HISTORY
===================================== */

#sc-builder .ai-chat-history{

display:flex;

flex-direction:column;

gap:10px;

margin-top:10px;

margin-bottom:12px;

height:210px;

overflow-y:auto;
}

/* =====================================
   AI CHAT MESSAGES
===================================== */

#sc-builder .ai-message{

padding:10px;

font-size:11px;

line-height:1.55;

border-radius:6px;

white-space:pre-wrap;
}

#sc-builder .ai-message.user{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.06);

color:#d8d8d8;

align-self:flex-end;

max-width:88%;
}

#sc-builder .ai-message.assistant{

background:rgba(0,255,65,0.06);

border:1px solid rgba(0,255,65,0.14);

color:#b7ffb7;

align-self:flex-start;

max-width:88%;
}

/* =====================================
   AI LOADING DOTS
===================================== */

#sc-builder .ai-dots{

display:inline-block;

animation: aiDotsBlink 1.2s infinite;
}

@keyframes aiDotsBlink{

0%{
opacity:0.2;
}

50%{
opacity:1;
}

100%{
opacity:0.2;
}

}

.ai-disabled .ai-box-title {

  opacity: 0.45;
  color: #777;
  letter-spacing: 1px;
  text-shadow: none;

}
.ai-disabled .ai-tags {

  opacity: 0.4;

}

/* =====================================================
   ADD TO CART VERIFIED TOOLTIP
===================================================== */

.config-tooltip.cart-ready-active {

    background:
        linear-gradient(
            180deg,
            #081b12 0%,
            #04110b 100%
        );

    border:
        1px solid #00ff88;

    color:
        #8dffbf;

    box-shadow:
        0 0 18px rgba(0,255,120,0.25);

}