/* Unified visual language for window, door and balcony-block configurators. */

#windowConfigModal,
#lightDoorModal,
#balconyBlockModal {
  --cfg-ink: #17212b;
  --cfg-muted: #667281;
  --cfg-border: rgba(23, 33, 43, .11);
  --cfg-border-strong: rgba(23, 33, 43, .16);
  --cfg-accent: #ea9216;
  --cfg-accent-soft: #fff3e3;
  --cfg-track: #dbe2ea;
  --cfg-thumb: #334252;
  --cfg-radius: 8px;
  --cfg-panel-shadow: 0 10px 24px rgba(23, 33, 43, .06);
  color: var(--cfg-ink);
  font-family: inherit;
  font-size: 14px;
}

/* Reference panels */
#windowConfigModal .wc-ref-panel,
#lightDoorModal .wc-ref-panel,
#balconyBlockModal .bb-ref-panel {
  border: 1px solid var(--cfg-border);
  border-radius: var(--cfg-radius);
  background: rgba(255, 255, 255, .9);
  box-shadow: none;
}

#windowConfigModal .wc-ref-panel__head,
#lightDoorModal .wc-ref-panel__head,
#balconyBlockModal .bb-ref-panel__head {
  min-height: 3.25rem;
  padding: .58rem .7rem;
  border-radius: var(--cfg-radius);
  color: var(--cfg-ink);
  font-family: inherit;
}

#windowConfigModal .wc-ref-panel__copy strong,
#lightDoorModal .wc-ref-panel__copy strong,
#balconyBlockModal .bb-ref-panel__copy strong {
  color: var(--cfg-ink);
  font-size: .84rem;
  font-weight: 850;
  line-height: 1.15;
}

#windowConfigModal .wc-ref-panel__copy small,
#lightDoorModal .wc-ref-panel__copy small,
#balconyBlockModal .bb-ref-panel__copy small {
  color: var(--cfg-muted);
  font-size: .68rem;
  font-weight: 650;
  line-height: 1.15;
}

#windowConfigModal .wc-ref-panel__body,
#lightDoorModal .wc-ref-panel__body,
#balconyBlockModal .bb-ref-panel__body {
  padding: .68rem .72rem .75rem;
}

/* Labels and fields */
#windowConfigModal .form-label,
#lightDoorModal .form-label,
#balconyBlockModal .form-label,
#windowConfigModal .small.fw-semibold,
#lightDoorModal .small.fw-semibold,
#balconyBlockModal .small.fw-semibold {
  color: #25313d;
  font-family: inherit;
  font-size: .76rem;
  font-weight: 800 !important;
  line-height: 1.15;
}

#windowConfigModal .form-control,
#windowConfigModal .form-select,
#lightDoorModal .form-control,
#lightDoorModal .form-select,
#balconyBlockModal .form-control,
#balconyBlockModal .form-select,
#windowConfigModal .wc-window-select__button,
#lightDoorModal .wc-select__button,
#balconyBlockModal .bb-select__button {
  min-height: 2.2rem;
  padding: .38rem .62rem;
  border: 1px solid var(--cfg-border-strong);
  border-radius: var(--cfg-radius);
  background-color: #fff;
  color: #25313d;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 650;
  box-shadow: none;
}

#windowConfigModal .form-control:focus,
#windowConfigModal .form-select:focus,
#lightDoorModal .form-control:focus,
#lightDoorModal .form-select:focus,
#balconyBlockModal .form-control:focus,
#balconyBlockModal .form-select:focus,
#windowConfigModal .wc-window-select.is-open .wc-window-select__button,
#lightDoorModal .wc-select.is-open .wc-select__button,
#balconyBlockModal .bb-select.is-open .bb-select__button {
  border-color: rgba(234, 146, 22, .72);
  box-shadow: 0 0 0 3px rgba(234, 146, 22, .12);
}

/* Identical preview surface */
html:not([data-bs-theme="dark"]) #windowConfigModal .wc-preview-stage,
html:not([data-bs-theme="dark"]) #lightDoorModal .ld-preview-stage,
html:not([data-bs-theme="dark"]) #balconyBlockModal .bb-preview-stage {
  overflow: hidden;
  border: 1px solid var(--cfg-border);
  border-radius: var(--cfg-radius);
  background: #f3eee6 url("/assets/img/window-config-bg.png") center / cover no-repeat !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
}

html:not([data-bs-theme="dark"]) #balconyBlockModal .bb-preview-stage::before,
html:not([data-bs-theme="dark"]) #balconyBlockModal .bb-preview-stage::after {
  display: none !important;
}

/* Shared selection cards for glass, sandwich and hardware */
#windowConfigModal .camera-card,
#lightDoorModal .camera-card,
#lightDoorModal .ld-fill-card,
#balconyBlockModal .bb-image-card,
#balconyBlockModal .bb-fill-card {
  border: 1px solid var(--cfg-border) !important;
  border-radius: var(--cfg-radius) !important;
  background: rgba(255, 255, 255, .86);
  color: var(--cfg-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

#windowConfigModal .camera-card:hover,
#lightDoorModal .camera-card:hover,
#lightDoorModal .ld-fill-card:hover,
#balconyBlockModal .bb-image-card:hover,
#balconyBlockModal .bb-fill-card:hover {
  border-color: rgba(234, 146, 22, .45) !important;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .075);
}

#windowConfigModal .camera-card.active,
#lightDoorModal .camera-card.active,
#lightDoorModal .ld-fill-card.active,
#balconyBlockModal .bb-image-card.active,
#balconyBlockModal .bb-fill-card.active {
  border-color: var(--cfg-accent) !important;
  background: var(--cfg-accent-soft);
  box-shadow: 0 0 0 2px rgba(234, 146, 22, .16);
}

#windowConfigModal .camera-card img,
#lightDoorModal .camera-card img,
#balconyBlockModal .bb-image-card img {
  display: block;
  width: auto;
  height: 3rem;
  max-width: 100%;
  margin: 0 auto .25rem;
  object-fit: contain;
}

#windowConfigModal [data-handle] img,
#lightDoorModal [data-handle] img {
  height: 2.8rem;
}

/* Identical dimension scales */
#windowConfigModal .horizontal-slider,
#windowConfigModal .vertical-slider,
#lightDoorModal .horizontal-slider,
#lightDoorModal .vertical-slider,
#balconyBlockModal .bb-size-control input[type="range"],
#balconyBlockModal .bb-impost-range {
  accent-color: var(--cfg-thumb);
}

#windowConfigModal .horizontal-slider::-webkit-slider-runnable-track,
#windowConfigModal .vertical-slider::-webkit-slider-runnable-track,
#lightDoorModal .horizontal-slider::-webkit-slider-runnable-track,
#lightDoorModal .vertical-slider::-webkit-slider-runnable-track,
#balconyBlockModal .bb-size-control input[type="range"]::-webkit-slider-runnable-track,
#balconyBlockModal .bb-impost-range::-webkit-slider-runnable-track {
  height: .36rem;
  border-radius: 999px;
  background: var(--cfg-track);
}

#windowConfigModal .horizontal-slider::-moz-range-track,
#windowConfigModal .vertical-slider::-moz-range-track,
#lightDoorModal .horizontal-slider::-moz-range-track,
#lightDoorModal .vertical-slider::-moz-range-track,
#balconyBlockModal .bb-size-control input[type="range"]::-moz-range-track,
#balconyBlockModal .bb-impost-range::-moz-range-track {
  height: .36rem;
  border-radius: 999px;
  background: var(--cfg-track);
}

#windowConfigModal .horizontal-slider::-webkit-slider-thumb,
#windowConfigModal .vertical-slider::-webkit-slider-thumb,
#lightDoorModal .horizontal-slider::-webkit-slider-thumb,
#lightDoorModal .vertical-slider::-webkit-slider-thumb,
#balconyBlockModal .bb-size-control input[type="range"]::-webkit-slider-thumb,
#balconyBlockModal .bb-impost-range::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--cfg-thumb);
  box-shadow: 0 6px 14px rgba(23, 33, 43, .18);
}

#windowConfigModal .horizontal-slider::-webkit-slider-thumb,
#lightDoorModal .horizontal-slider::-webkit-slider-thumb,
#balconyBlockModal .bb-size-control input[type="range"]::-webkit-slider-thumb,
#balconyBlockModal .bb-impost-range::-webkit-slider-thumb {
  margin-top: -.32rem;
}

#windowConfigModal .horizontal-slider::-moz-range-thumb,
#windowConfigModal .vertical-slider::-moz-range-thumb,
#lightDoorModal .horizontal-slider::-moz-range-thumb,
#lightDoorModal .vertical-slider::-moz-range-thumb,
#balconyBlockModal .bb-size-control input[type="range"]::-moz-range-thumb,
#balconyBlockModal .bb-impost-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--cfg-thumb);
  box-shadow: 0 6px 14px rgba(23, 33, 43, .18);
}

/* Shared color presentation */
#windowConfigModal .color-swatch,
#lightDoorModal .color-swatch,
#balconyBlockModal .color-swatch {
  border: 2px solid rgba(255, 255, 255, .98) !important;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--cfg-border-strong), 0 2px 7px rgba(23, 33, 43, .1);
}

#windowConfigModal .color-swatch.active,
#lightDoorModal .color-swatch.active,
#balconyBlockModal .color-swatch.active {
  border-color: var(--cfg-accent) !important;
  box-shadow: 0 0 0 1px rgba(234, 146, 22, .5), 0 4px 10px rgba(23, 33, 43, .14);
}

/* Unified primary actions */
#windowConfigModal .floating-action-bar .btn-primary,
#lightDoorModal .floating-action-bar .btn-primary,
#balconyBlockModal .floating-action-bar .btn-primary {
  min-height: 2.55rem;
  border-color: var(--cfg-ink);
  border-radius: var(--cfg-radius);
  background: var(--cfg-ink);
  color: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 850;
  box-shadow: 0 8px 20px rgba(23, 33, 43, .14);
}

@media (max-width: 767.98px) {
  #windowConfigModal,
  #lightDoorModal,
  #balconyBlockModal {
    font-size: 13px;
  }
}

/* Balcony mosquito control and mesh parity with the window configurator. */
#balconyBlockModal .bb-svg .bb-sash-badge{
  pointer-events:all!important;
  cursor:pointer;
  outline:none;
}
#balconyBlockModal .bb-svg .bb-sash-badge rect{
  transition:fill .15s ease,stroke .15s ease,filter .15s ease;
}
#balconyBlockModal .bb-svg .bb-sash-badge:hover rect,
#balconyBlockModal .bb-svg .bb-sash-badge:focus-visible rect{
  fill:#fff3e3;
  stroke:rgba(234,146,22,.7);
  stroke-width:1.5px;
}
#balconyBlockModal .bb-svg .bb-sash-badge.is-active rect{
  fill:#fff3e3;
  stroke:#ea9216;
  stroke-width:1.7px;
}
#balconyBlockModal .bb-svg .bb-sash-badge.is-active text{fill:#553915}
#balconyBlockModal .bb-svg .bb-mosquito-frame{
  fill-opacity:.24;
  stroke:#7b8794;
  stroke-width:1.25;
  stroke-dasharray:3 3;
  pointer-events:none;
}
#balconyBlockModal .bb-svg .bb-mosquito-line{
  stroke:rgba(104,116,130,.36);
  stroke-width:.7;
  pointer-events:none;
}
#balconyBlockModal .bb-svg .bb-mosquito-label{display:none}