/* LED CTRL Design System Overrides */
body,#app{font-family:"Montserrat","Segoe UI",system-ui,sans-serif!important}

/* NAV BAR - flat white, sharp orange underline active */
#navigationBarContainer{background:#fff!important;border:none!important;border-bottom:1px solid rgba(20,27,31,.10)!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;position:relative!important}
.navBarOption{border-radius:0!important;border:none!important;border-bottom:3px solid transparent!important;font-family:"Montserrat",sans-serif!important;font-size:10.5px!important;font-weight:500!important;letter-spacing:.08em!important;text-transform:uppercase!important;transition:color .2s ease,border-color .2s ease!important;background:transparent!important;box-shadow:none!important;color:rgba(15,20,18,.35)!important;font-weight:400!important}
.navBarOption.active{border-bottom:3px solid #ff8c00!important;background:transparent!important;box-shadow:none!important;color:rgba(15,20,18,.92)!important;border-radius:0!important;text-shadow:0 0 12px rgba(255,140,0,.25)!important}
.navBarOption.selectable:hover{border-bottom:2px solid rgba(255,140,0,.32)!important;background:transparent!important;box-shadow:none!important}
.navBarOption.completed{position:relative!important}
.navBarOption.completed::after{content:""!important;position:absolute!important;bottom:0!important;left:0!important;width:100%!important;height:2px!important;background:rgba(255,140,0,.28)!important}
.navBarOption.blocked{opacity:.28!important;filter:grayscale(100%)!important;pointer-events:none!important}

/* MENU PANEL - flat white, no glass, no radius */
#menuContainer{background:#fff!important;border:none!important;border-top:1px solid rgba(20,27,31,.10)!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
#menuContentSectionHeader{font-family:"Montserrat",sans-serif!important;font-size:11px!important;font-weight:700!important;letter-spacing:.12em!important;text-transform:uppercase!important;color:rgba(15,20,18,.45)!important;border-bottom:1px solid rgba(20,27,31,.08)!important;height:44px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;padding-left:20px!important;animation:ledctrlFadeIn .22s ease both!important}
#menuContentSectionDescription{display:none!important}

/* OPTION ROWS - always show separator */
.selectOption,.selectOptionColor,.selectOptionMultiple{font-family:"Montserrat",sans-serif!important;border-radius:0!important;background:#fff!important;border:none!important;border-bottom:1px solid rgba(20,27,31,.06)!important;box-shadow:none!important;position:relative!important;transition:transform .18s ease,background .18s ease!important;animation:ledctrlReveal .22s ease both!important}
.selectOption:nth-child(1),.selectOptionColor:nth-child(1){animation-delay:0ms!important}
.selectOption:nth-child(2),.selectOptionColor:nth-child(2){animation-delay:40ms!important}
.selectOption:nth-child(3),.selectOptionColor:nth-child(3){animation-delay:80ms!important}
.selectOption:nth-child(4),.selectOptionColor:nth-child(4){animation-delay:.12s!important}
.selectOption:nth-child(5),.selectOptionColor:nth-child(5){animation-delay:.16s!important}
.selectOption:nth-child(n+6),.selectOptionColor:nth-child(n+6){animation-delay:.2s!important}
.selectOption:hover,.selectOptionColor:hover{background:rgba(255,140,0,.02)!important;border-left:2px solid rgba(255,140,0,.28)!important;transform:translateX(2px)!important}
.selectOption.active,.selectOptionColor.active{background:rgba(255,140,0,.04)!important;border-left:3px solid #ff8c00!important;box-shadow:0 0 0 1px rgba(255,140,0,.18),0 2px 12px rgba(255,140,0,.08)!important}

/* PART NUMBER PANEL */
.partNumberPanel{background:#fff!important;border:none!important;border-top:2px solid rgba(255,140,0,.30)!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important}
#partNumber{background:#f8f9fa!important;border:1px solid rgba(20,27,31,.10)!important;border-radius:4px!important;font-family:ui-monospace,"SF Mono",Menlo,monospace!important;letter-spacing:.06em!important}
.partNumberLabel{font:700 10.5px/1.08 "Montserrat",sans-serif!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#1e2a30!important}

/* ACTION BUTTONS - orange pill */
.actionBtn{background:#ff8c00!important;color:#fff!important;border:none!important;border-radius:999px!important;box-shadow:none!important;font:700 11px/1 "Montserrat",sans-serif!important;letter-spacing:.04em!important;text-transform:uppercase!important}
.actionBtn:hover{background:#e67e00!important;transform:translateY(-2px)!important;box-shadow:0 8px 20px rgba(255,140,0,.28)!important}
.actionBtn:disabled{background:rgba(20,27,31,.08)!important;color:rgba(20,27,31,.36)!important;opacity:.45!important}

/* UNDO/RESET - premium glassy pill */
.quickIconBtn{background:linear-gradient(135deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.58) 100%)!important;border:1px solid rgba(255,255,255,.85)!important;border-bottom:1px solid rgba(255,255,255,.4)!important;border-radius:10px!important;box-shadow:0 2px 16px rgba(15,20,18,.08),0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(15,20,18,.04) inset!important;backdrop-filter:blur(24px) saturate(2.2)!important;-webkit-backdrop-filter:blur(24px) saturate(2.2)!important;color:rgba(15,20,18,.65)!important;font:500 11px/1 "Montserrat",sans-serif!important;letter-spacing:.04em!important}
.quickIconBtn:hover{background:linear-gradient(135deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.75) 100%)!important;border-color:rgba(255,255,255,.95)!important;box-shadow:0 4px 20px rgba(15,20,18,.10),0 1px 0 rgba(255,255,255,1) inset!important}

/* CANVAS CONTAINER - glassy, rounded, stands out */
#renderCanvasContainer{background:rgba(255,255,255,.04)!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 8px 32px rgba(15,20,18,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;backdrop-filter:blur(24px) saturate(2)!important;-webkit-backdrop-filter:blur(24px) saturate(2)!important;overflow:hidden!important}

/* OUTER MAIN CONTAINER - clean white background */
#mainContainer{background:#fff!important;border-radius:0!important;box-shadow:none!important}

/* DRAG TO ROTATE - small, glassy, bottom center */
#renderIntroOverlay{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;pointer-events:none!important}
#renderIntroOverlay .introInner{display:inline-flex!important;align-items:center!important;gap:6px!important;background:rgba(255,255,255,.22)!important;padding:6px 12px 6px 10px!important;border-radius:6px!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 2px 12px rgba(15,20,18,.08),inset 0 1px 0 rgba(255,255,255,.5)!important;backdrop-filter:blur(16px) saturate(1.6)!important;-webkit-backdrop-filter:blur(16px) saturate(1.6)!important;color:rgba(15,20,18,.55)!important;font:600 9px/1 "Montserrat",sans-serif!important;letter-spacing:.1em!important;text-transform:uppercase!important;user-select:none!important;white-space:nowrap!important}
#renderIntroOverlay .icon{width:20px!important;height:20px!important}

/* ANIMATIONS */
@keyframes ledctrlFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes ledctrlReveal{from{opacity:0;transform:translateX(-3px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.selectOption,.selectOptionColor,#menuContentSectionHeader{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Lighting locked via console tuning */

/* Hide the hardcoded orange dot on left of active option */
.selectOption.active > *:first-child:not(.selectOptionLabel):not(.selectOptionIcon),
.selectOptionColor.active > *:first-child:not(.selectOptionLabel):not(.selectOptionIcon){
  display:none!important;
  width:0!important;
  opacity:0!important;
}

/* Kill ::before dot on active option */
.selectOption.active::before,.selectOptionColor.active::before{display:none!important;content:none!important;width:0!important;height:0!important;opacity:0!important}

/* Thinner font weight across configurator */
body,#app,#menuContainer,.selectOption,.selectOptionColor,.selectOptionLabel,.navBarOption{font-weight:300!important}
.selectOption.active,.selectOptionColor.active,.navBarOption.active,.partNumberLabel{font-weight:600!important}
.selectOption,.selectOptionColor{font-weight:400!important}

/* Glassy rounded render canvas container */
#renderCanvasContainer,#renderCanvas,canvas{border-radius:20px!important;overflow:hidden!important}

/* Kill all dots on active options - nuclear option */
.selectOption::after,.selectOption::before,.selectOptionColor::after,.selectOptionColor::before{display:none!important;content:none!important;width:0!important;height:0!important;opacity:0!important}

/* OPTION ROW INTERACTION POLISH - cursor + iOS tap suppression */
.selectOption,.selectOptionColor,.selectOptionMultiple,.selectOptionDropdownTrigger{cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;tap-highlight-color:transparent!important}
.selectOption.optionDisabled,.selectOptionColor.optionDisabled{cursor:not-allowed!important}

/* MENU PANEL SCROLL SMOOTHNESS */
#menuContainer > *:first-child,#menuContainer > *:first-of-type{scroll-behavior:smooth!important}

/* Section header title - make it feel like a real title */
#menuContentSectionHeader{
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  color:rgba(15,20,18,.45)!important;
  padding-bottom:8px!important;
  height:auto!important;
  min-height:48px!important;
  justify-content:flex-start!important;
  padding-left:16px!important;
  border-bottom:1px solid rgba(20,27,31,.06)!important;
  position:relative!important;
}
#menuContentSectionHeader::after{
  content:""!important;
  position:absolute!important;
  bottom:0!important;
  left:16px!important;
  width:40px!important;
  height:2px!important;
  background:#ff8c00!important;
  border-radius:0!important;
}

/* Remove outer container background completely */
#contentContainer{background:transparent!important;border:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:8px!important}
#mainContainer{padding:0!important}

/* Transparent background when embedded in iframe */
html, body { background: transparent !important; }

/* ============================================================
   PREMIUM REFINEMENTS v3 — 2026-04-13
   Conservative visual elevation: rows, part number, buttons
   ============================================================ */

/* 1. OPTION ROWS — More spacious, remove translate jitter on hover */
.selectOption,.selectOptionColor,.selectOptionMultiple{
  padding:14px 20px!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
}
.selectOption:hover,.selectOptionColor:hover{
  transform:none!important;
  background:rgba(15,18,24,.022)!important;
  border-left:3px solid rgba(255,140,0,.40)!important;
}
.selectOption.active,.selectOptionColor.active{
  padding-left:17px!important;
}

/* 2. PART NUMBER LABEL — Precision spec header */
.partNumberLabel{
  font-size:9px!important;
  letter-spacing:.22em!important;
  font-weight:700!important;
  color:rgba(15,18,24,.38)!important;
  margin-bottom:10px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.partNumberLabel::before{
  content:!important;
  display:block!important;
  width:20px!important;
  height:2px!important;
  border-radius:1px!important;
  background:#ff8c00!important;
  flex-shrink:0!important;
  box-shadow:none!important;
}

/* 3. PART NUMBER VALUE — Instrument readout */
#partNumber{
  font-family:ui-monospace,SF Mono,JetBrains Mono,Menlo,Monaco,Consolas,monospace!important;
  font-size:15px!important;
  font-weight:500!important;
  letter-spacing:.07em!important;
  line-height:1.55!important;
  padding:14px 18px!important;
  border-radius:8px!important;
  background:rgba(14,18,24,.036)!important;
  border:1px solid rgba(14,18,24,.10)!important;
  color:rgba(14,18,24,.88)!important;
  box-shadow:inset 0 1px 4px rgba(14,18,24,.04)!important;
  display:block!important;
  word-break:break-all!important;
  min-height:52px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#partNumber.pnPending{
  opacity:.42!important;
  color:rgba(14,18,24,.28)!important;
  background:rgba(14,18,24,.018)!important;
  border-color:rgba(14,18,24,.06)!important;
  filter:blur(.4px)!important;
  user-select:none!important;
}

/* 4. ACTION BUTTONS — Architectural, not generic orange pill */
.actionBtn{
  flex:1!important;
  height:44px!important;
  padding:0 18px!important;
  border-radius:10px!important;
  background:transparent!important;
  color:rgba(15,18,24,.68)!important;
  border:1px solid rgba(15,18,24,.15)!important;
  box-shadow:none!important;
  font-family:Montserrat,sans-serif!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  transition:all .18s cubic-bezier(.22,.61,.36,1)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.actionBtn:hover{
  background:rgba(15,18,24,.038)!important;
  border-color:rgba(15,18,24,.28)!important;
  color:rgba(15,18,24,.90)!important;
  transform:none!important;
  box-shadow:none!important;
}
.actionBtn:disabled{
  background:transparent!important;
  color:rgba(15,18,24,.24)!important;
  border-color:rgba(15,18,24,.08)!important;
  opacity:1!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

/* Primary action — Copy Part Number: dark, confident */
#copyPartNumberBtn{
  background:#ff8c00!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 4px 24px rgba(255,140,0,.30)!important;
}
#copyPartNumberBtn:hover{
  background:#e67e00!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 8px 20px rgba(255,140,0,.28)!important;
  transform:translateY(-2px)!important;
}

/* 5. PN APPLY ROW — Refined inputs */
.actionsRow{
  gap:10px!important;
  margin-top:16px!important;
}
.pnApplyRow{
  margin-top:12px!important;
  gap:8px!important;
}
.pnApplyInput{
  height:40px!important;
  border-radius:8px!important;
  font-size:12px!important;
  letter-spacing:.02em!important;
  background:rgba(14,18,24,.03)!important;
  border:1px solid rgba(14,18,24,.12)!important;
  color:rgba(14,18,24,.84)!important;
  box-shadow:none!important;
  transition:border-color .15s ease,box-shadow .15s ease!important;
}
.pnApplyInput::placeholder{
  color:rgba(14,18,24,.30)!important;
  font-size:11.5px!important;
  letter-spacing:.02em!important;
}
.pnApplyInput:focus-visible{
  border-color:rgba(255,140,0,.50)!important;
  box-shadow:0 0 0 3px rgba(255,140,0,.12)!important;
  background:rgba(255,255,255,.7)!important;
}
.pnApplyBtn{
  flex-shrink:0!important;
  height:40px!important;
  border-radius:8px!important;
  font-family:Montserrat,sans-serif!important;
  font-size:10.5px!important;
  font-weight:700!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  background:transparent!important;
  border:1px solid rgba(14,18,24,.14)!important;
  color:rgba(14,18,24,.68)!important;
  padding:0 16px!important;
  cursor:pointer!important;
  transition:all .15s ease!important;
}
.pnApplyBtn:hover{
  border-color:rgba(255,140,0,.48)!important;
  color:#ff8c00!important;
  background:rgba(255,140,0,.04)!important;
  transform:none!important;
  box-shadow:none!important;
}