@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* theme colors */
:root{
  --accent:           #dda05e;  /* normal */
  --accent-disabled:  #685546;  /* disabled highlight */
  --track:            #9a9a9a;
  --fs:13px; /*font size*/
  --panel-w:200px;
}


html, body, .toolbar, input, select, button, .modal, #status {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs);
}

/* viewer container + blur while solving */
#viewport { 
  position: fixed;
  top:0;
  right: 0;
  bottom: 0;
  left: var(--panel-w);
}

#viewport.loading {
  filter: blur(3px) saturate(0.7);
  transition: filter .18s ease;
  pointer-events: none; /* block clicks while solving */
}

body{
    margin:0;
    background:#0b0d10;
    color:#e6e6e6;
    font-family:ui-sans-serif,system-ui
}


/* ---------- left panel ---------- */
.toolbar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--panel-w);
  z-index: 10;
  padding: 20px 18px;
  background: linear-gradient(45deg, #1e2022 0%, #2a2d31 100%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  /* simple stack – each .field is self-contained */
  display: flex;
  flex-direction: column;
  gap: 30px;
}
/* heading */
.toolbar::before{
  content: "Select a design";
  margin: 0 15px -24px;
  font-style: italic;
  letter-spacing: .02em;
  color: #b8bdc3;
  opacity: .5;
}
#ctrlpanel.toolbar{
  border: 0; 
  margin: 0; 
  min-inline-size: 0;
}
#ctrlpanel{
  position: fixed;      /* stay docked left */
  top: 0; left: 0; bottom: 0;
  width: var(--panel-w);
  display: flex;        /* stack controls vertically */
  flex-direction: column;
  overflow: auto;       /* scroll *inside* panel if contents ever exceed height */
  scrollbar-gutter: stable; /* prevent layout shift when scrollbar appears */
}
/* ---- Viewport overlay tools (bottom-left of 3D canvas) ---- */
#viewport-tools {
  position: fixed;      /* JS sets left; bottom is static */
  bottom: 14px;
  left: 14px;           /* fallback; overridden by JS after panel measures */
  z-index: 1200;
  display: flex;
  align-items: stretch; /* all buttons share the same height */
  gap: 8px;
}
.vp-tool-btn {
  padding: 10px 14px;
  border-radius: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #dfe5ec;
  cursor: pointer;
  backdrop-filter: blur(8px);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--fs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vp-tool-btn:hover { background: rgba(255,255,255,0.14); }
.vp-tool-btn svg, .btn-info svg { overflow: visible; }
.vp-tool-btn.active {
  background: rgba(110,200,255,0.18);
  border-color: rgba(110,200,255,.35);
}
/* icon-only button — same size as text button; position: relative for tooltip */
.vp-tool-icon { position: relative; }
.vp-tool-btn .icon-compress { display: none; }
.vp-tool-btn.is-fullscreen .icon-expand { display: none; }
.vp-tool-btn.is-fullscreen .icon-compress { display: flex; }
/* tooltip */
.vp-tool-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(20,22,26,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  color: #d5d9de;
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}
.vp-tool-icon[data-tip]:hover::after { opacity: 1; }

/* ---- Backboard dropdown ---- */
.vp-tool-dropdown-wrap {
  position: relative;
  display: flex;
}
.vp-swatch-inline {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255,255,255,0.3);
  vertical-align: middle;
  margin-left: 5px;
  flex-shrink: 0;
}
.vp-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: rgba(20,22,26,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 1500;
}
.vp-dropdown-item {
  width: 22px;
  height: 22px;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.vp-dropdown-item:hover { border-color: rgba(255,255,255,0.5); }
.vp-dropdown-item.is-active {
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 2px rgba(12,14,18,0.8);
}

/* ---- Material picker ---- */
.mat-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mat-picker {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mat-picker__row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mat-expand-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.mat-expand-btn:hover { color: rgba(255,255,255,0.7); }
.mat-expand-btn svg { transition: transform 0.2s ease; }
.mat-picker.is-expanded .mat-expand-btn svg { transform: rotate(180deg); }
.mat-picker__custom {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mat-picker.is-expanded .mat-picker__custom { display: flex; }
.mat-swatch {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent;
  outline: none;
}
.mat-swatch.is-active {
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 2px #1a1c1f;
}
.mat-swatch:hover:not(.is-active) {
  border-color: rgba(255,255,255,0.35);
}

/* ---- Radio group (type / shape / style selectors) ---- */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}
.radio-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  color: rgba(232,234,237,.45);
  font-size: 13px;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.radio-opt:hover { color: rgba(232,234,237,.72); }
.radio-opt:has(input:checked) { color: #e8eaed; }
.radio-opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.28);
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  transition: border-color 0.15s, background 0.15s;
}
.radio-opt input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(200,146,42,.2);
}
.radio-opt input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,109,26,.25);
}
.toolbar.busy .radio-opt { pointer-events: none; }

/* thin divider under the product dropdown */
.divider{
  flex: 0 0 auto;
  width: 100%;
  height: 0; /* use a border instead of a 1px background */
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 6px 0;
}

/* each control group */
.field{
  display: grid;
  grid-template-columns: 1fr auto;   /* label | value */
  grid-auto-rows: min-content;
  gap: 6px 10px;
}
.field .badge{ grid-column: 1; line-height: 1.1; }
.field .value{ grid-column: 2; justify-self: end; line-height: 1.1; }
.field .ctrl{  grid-column: 1 / -1; }


/* labels + numeric chips */
.badge{
  font-size: 13px;
  color:#d5d9de;
  opacity:.9;
}
/* CTC over-limit tooltip — floats below field, no layout impact */
#field-sp { position: relative; }
.ctc-tip {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: none;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
.ctc-tip--visible { display: block; }
.value{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #e8eaed;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

/* Sliders: custom track + orange thumb, no filled-left highlight */
.slider{
  /* kill native accent-fill & give us full control */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;   /* we draw track below */
  height: 22px;              /* provides vertical room for thumb */
  margin: 0;
}
/* WebKit/Blink track */
.slider::-webkit-slider-runnable-track{
  height: 3px;
  background: var(--track);
  border-radius: 0;
}
/* WebKit/Blink thumb */
.slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
  /* vertically center thumb over 4px track */
  margin-top: -6px; /* = (thumb 16 / 2) - (track 4 / 2) */
}
/* Firefox track */
.slider::-moz-range-track{
  height: 3px;
  background: var(--track);
  border-radius: 0;
}
/* Firefox thumb */
.slider::-moz-range-thumb{
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
}
/* focus/hover niceties (optional) */
.slider:focus-visible::-webkit-slider-runnable-track,
.slider:focus-visible::-moz-range-track{
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,109,26,.18);
}

/* product + type dropdowns expand full width */
.dropdown{ width: 100%; }
/* bigger, comfy dropdown with custom chevron */
.dropdown{
  color-scheme: dark;
  appearance: none;
  font-size: 13px;
  line-height: 1.2;
  padding: 10px 36px 10px 12px;
  color: #e6e8eb;
  background:
    linear-gradient(#2a2e34, #242527) padding-box,
    linear-gradient(180deg,#3a4047,#2b2f35) border-box;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;

  /* chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d8dde3' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.dropdown:focus{
  outline: none;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.dropdown option{
  color: #2a2d31;
}
.dropdown option:hover{
  color: #2a2d31;
  background: #a45516;
}
.dropdown option:highlight{
  color: #2a2d31;
  background: #a45516;
}

/* ---- Segmented toggle (Density replacement) ---- */
.segmented.ctrl{
  width: 100%;
  margin-top: 5px;
}
.segmented{
  --pad: 3px;
  position: relative;
  display: flex;
  box-sizing: border-box;
  align-items: stretch;
  padding: var(--pad);
  border-radius: 0;

  /* match your dropdown/slider vibe */
  background:
    linear-gradient(#2a2e34, #242527) padding-box,
    linear-gradient(180deg,#3a4047,#2b2f35) border-box;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.segmented__thumb{
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  height: calc(100% - (var(--pad) * 2));
  width: 0px;               /* set by JS */
  border-radius: 0;
  background: rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.10);
  transition: transform 180ms ease, width 180ms ease;
  pointer-events: none;
}
.segmented__btn{
  flex: 1;                   /* equal segment widths */
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: rgba(232,234,237,.55);
  font: 500 13px/1 'Inter', ui-sans-serif, system-ui, sans-serif;
  padding: 9px 0;
  cursor: pointer;

  display: flex;             /* true centering */
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 0;
}
.segmented__btn[aria-pressed="true"]{
  color: #e8eaed;
}
.segmented__btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(216,109,26,.18); /* matches your slider focus */
}


/* busy state (your JS toggles .toolbar.busy) */
.toolbar.busy .slider,
.toolbar.busy select{
  pointer-events: none;
  cursor: progress;
  opacity: .9;
}
/* Fade slider to disabled accent while solving or when disabled */
.toolbar.busy .slider::-webkit-slider-thumb,
.slider:disabled::-webkit-slider-thumb{
  background: var(--accent-disabled);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
}

.toolbar.busy .slider::-moz-range-thumb,
.slider:disabled::-moz-range-thumb{
  background: var(--accent-disabled);
  box-shadow: 0 1px 0 rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
}


/* status chip stays at panel corner */
#status{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;          /* above viewer & panel */
  opacity: .6;            /* keep your existing look */
  pointer-events: none;   /* won’t block interactions */
}
/* ---- Quote actions wrapper (top-right) ---- */
.quote-actions {
  position: fixed;
  top: 14px; right: 16px;
  z-index: 1400;
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.btn-buy{
  padding: 10px 18px;
  border-radius: 0;
  background: #C8922A;
  border: none;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
}
.btn-buy:hover{ background: #b07d22; }
.btn-send {
  padding: 10px 18px;
  border-radius: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .04em;
}
.btn-send:hover { border-color: rgba(255,255,255,0.75); color: #fff; }

/* ---- Quote list (below buttons) ---- */
.quote-list {
  position: fixed;
  top: 58px; right: 16px;
  z-index: 1400;
  text-align: right;
  max-width: 300px;
}
.quote-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.8;
}
.quote-item__label {
  cursor: pointer;
}
.quote-item__label:hover { color: rgba(255,255,255,0.9); }
.quote-item__remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}
.quote-item__remove:hover { color: rgba(255,255,255,0.75); }

/* ---- Floating info button (bottom-right) ---- */
.btn-info{
  position: fixed;
  bottom: 14px; right: 16px;
  z-index: 1400;
  width: 36px; height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(196,201,208,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-info:hover{ color: #e7ecf2; }

/* ---- Modal scaffold ---- */
.modal{ 
  position: fixed; 
  inset: 0;
  display: none;
  z-index: 1500; 
  }
.modal.is-open{ display: block; }
.modal__backdrop{
  position: absolute; inset: 0; background: rgba(0,0,0,.48);
}
.modal__panel{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, calc(100vw - 40px));
  max-height: min(80vh, 680px);
  overflow: auto;
  padding: 20px 36px 18px;
  border-radius: 0;
  background: linear-gradient(180deg, #2c2f33 0%, #2a2d31 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  color: #e9edf3;
}
.modal__close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
   /* icon (inline SVG) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9EDF3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6L18 18M18 6L6 18'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;   /* tweak icon size here */
}
.modal__close:hover{ background-color: rgba(255,255,255,.16); }
.modal__close:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* ---- Quote modal form ---- */
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}
.quote-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quote-field label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232,234,237,.6);
}
.quote-field input {
  padding: 10px 12px;
  background:
    linear-gradient(#2a2e34, #242527) padding-box,
    linear-gradient(180deg,#3a4047,#2b2f35) border-box;
  border: 1px solid rgba(255,255,255,.12);
  color: #e6e8eb;
  font-size: 13px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  outline: none;
  border-radius: 0;
}
.quote-field input:focus { border-color: rgba(255,255,255,.28); }
.quote-form__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.btn-modal-cancel {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  cursor: pointer;
  font-size: 13px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em;
  border-radius: 0;
}
.btn-modal-cancel:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.9); }
.btn-modal-submit {
  padding: 10px 18px;
  background: #C8922A;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 0;
}
.btn-modal-submit:hover { background: #b07d22; }
.btn-modal-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Optional: compact on small screens */
@media (max-width: 520px){
  .toolbar{ gap: 8px 12px; }
}