@import url("configurator-sidebar-unified.css");
/* Visual alignment with the roller-shutter configurator. Drawing styles are intentionally excluded. */
:root{--ui-purple:#6c3fc5;--ui-purple-dark:#5830aa;--ui-purple-soft:#f4effd;--ui-text:#263746;--ui-border:#d8e0e5;--ui-muted:#697984}
body{font-family:"Segoe UI",Arial,sans-serif;color:var(--ui-text);background:#eef2f5;font-size:14px;line-height:1.45}
.layout{grid-template-columns:330px minmax(520px,1fr) 300px}
.panel-left,.panel-right{padding:20px;background:#fff}
.panel-left{border-right:1px solid #dce3e8}.panel-right{border-left:1px solid #dce3e8}
.panel-left>h3{margin:0 0 15px;padding:0;border:0;color:var(--ui-text);font-size:20px;font-weight:700}
.panel-right>h3{margin:0 0 20px;padding:0 0 10px;border:0;border-bottom:1px solid var(--ui-border);color:var(--ui-text);font-size:17px;font-weight:700}
.panel-left .form-group{margin:0 0 15px;padding:0 0 15px;border-bottom:1px solid #dce3e8}
.panel-left .form-label,.panel-left .section-label{margin:0 0 9px;color:var(--ui-text);font-size:14px;font-weight:700}
.panel-left .input-label,.panel-left .extender-item label,.panel-left .color-label{color:#4c5c67;font-size:12px;font-weight:600}
.panel-left input:not([type=radio]):not([type=checkbox]),.panel-left select,.panel-left textarea{padding:9px 10px;border:1px solid #ccd5db;border-radius:3px;background:#fff;color:var(--ui-text);font:14px/1.25 "Segoe UI",Arial,sans-serif;box-shadow:none}
.panel-left input:not([type=radio]):not([type=checkbox]):focus,.panel-left select:focus,.panel-left textarea:focus{outline:none;border-color:var(--ui-purple);box-shadow:0 0 0 2px rgba(108,63,197,.12)}
.panel-left .selection-display,.panel-left .color-selection-display{min-height:58px;padding:0;gap:0;overflow:hidden;border:1px solid #d6dee4;border-radius:5px;background:#fff;box-shadow:none}
.selection-image,.color-preview{border:1px solid #d5dde2;border-radius:4px;background:#fff}
.panel-left .selection-display>.selection-image{width:88px;height:82px;flex:0 0 88px;margin:3px;border:0;border-radius:0;padding:0;object-fit:contain}
.panel-left .selection-display>.color-preview,.panel-left .color-selection-display>.color-preview{width:60px;height:60px;flex:0 0 60px;margin:4px;border:1px solid #bdc8cf;border-radius:0;padding:0}
.panel-left .selection-name,.panel-left .color-name{min-width:0;padding:5px 4px;color:var(--ui-text);font-size:13px;font-weight:700;line-height:1.22}
.btn-change,.btn-change-small{border:0;border-radius:4px;background:var(--ui-purple);color:#fff;font-family:"Segoe UI",Arial,sans-serif;font-weight:700;box-shadow:none;transform:none}
.btn-change{padding:7px 13px;font-size:12px}.btn-change-small{padding:7px 12px;font-size:12px}
.panel-left .selection-display>.btn-change,.panel-left .color-selection-display>.btn-change-small{align-self:stretch;display:flex;align-items:center;justify-content:center;margin:0;border-radius:0;min-width:64px;padding:7px 6px;font-size:13px;font-weight:600}
.btn-change:hover,.btn-change-small:hover{background:var(--ui-purple-dark);box-shadow:none;transform:none}
#btn-add-to-cart{padding:13px!important;border:0!important;border-radius:4px!important;background:var(--ui-purple)!important;color:#fff!important;font:700 14px/1.35 "Segoe UI",Arial,sans-serif!important;box-shadow:none!important}
#btn-add-to-cart:hover{background:var(--ui-purple-dark)!important}
#btn-add-to-cart:disabled{opacity:.6;cursor:not-allowed!important}
#btn-view-cart{padding:13px!important;margin-top:8px!important;border-radius:4px!important;background:#e9edf0!important;color:var(--ui-text)!important;font:700 14px/1.35 "Segoe UI",Arial,sans-serif!important}
#btn-view-cart:hover{background:#dce3e8!important}
.panel-right #summary{margin:0}.panel-right .summary-item{display:grid;grid-template-columns:minmax(105px,42%) 1fr;gap:10px;padding:10px 0;border-bottom:1px solid #e2e7ea;font-size:13px}
.panel-right .summary-item strong{display:block;margin:0;color:#4b5a65;font-weight:700}.panel-right .summary-item span{color:var(--ui-text)}
.profile-card.selected,.window-type-card.selected,.color-card.selected,.glazing-card.selected,.handle-card.selected,.hardware-card.selected,.ornamental-glass-card.selected{border-color:var(--ui-purple)!important;background-color:var(--ui-purple-soft)!important}
.filter-btn.active,.radio-option:has(input:checked){border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;color:var(--ui-purple-dark)!important}
.modal-content{border-radius:5px}.modal-header{border-bottom-color:var(--ui-border)}.modal-header h2{color:var(--ui-text);font-family:"Segoe UI",Arial,sans-serif}
#profile-modal,#window-type-modal,#opening-modal,#glazing-modal,#handle-modal,#color-interior-modal,#color-exterior-modal{z-index:20000}
#profile-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;overflow:visible;border-radius:9px}
#profile-modal .modal-header{padding:15px 20px}
#profile-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#profile-modal .modal-body{padding:20px;overflow:visible}
#profile-modal .profile-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px}
#profile-modal .profile-card{min-height:130px;aspect-ratio:auto;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;box-shadow:none;transform:none}
#profile-modal .profile-card:hover{z-index:10002;border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#profile-modal .profile-card.selected{border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#profile-modal .profile-image{width:100%;height:90px;background:#fff;overflow:hidden}
#profile-modal .profile-image img{display:block;width:100%;height:90px;padding:0;object-fit:contain}
#profile-modal .profile-info{position:static;padding:7px 0 0;text-align:left}
#profile-modal .profile-name{color:var(--ui-text);font-size:14px;font-weight:700;line-height:1.3;text-shadow:none}
#profile-modal .profile-tooltip{top:auto;bottom:calc(100% + 15px);z-index:10010}
#profile-modal .profile-tooltip::after{top:100%;bottom:auto;border-top-color:#2c3e50;border-bottom-color:transparent}
#window-type-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;border-radius:9px;overflow:hidden}
#window-type-modal .modal-header{padding:15px 20px}
#window-type-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#window-type-modal .modal-body{padding:20px;overflow-y:auto}
#window-type-modal .window-type-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;overflow:visible}
#window-type-modal .window-type-card{min-height:130px;aspect-ratio:auto;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;box-shadow:none;transform:none}
#window-type-modal .window-type-card:hover{z-index:10002;border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#window-type-modal .window-type-card.selected{border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#window-type-modal .window-type-image{width:100%;height:90px;background:#fff;overflow:hidden}
#window-type-modal .window-type-image img{display:block;width:100%;height:90px;padding:0;object-fit:contain}
#window-type-modal .window-type-info{position:static;padding:7px 0 0;text-align:left}
#window-type-modal .window-type-name{color:var(--ui-text);font-size:14px;font-weight:700;line-height:1.3;text-shadow:none}
#opening-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;overflow:hidden;border-radius:9px}
#opening-modal .modal-header{padding:15px 20px}
#opening-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#opening-modal .modal-body{padding:20px;overflow-y:auto}
#opening-modal .window-type-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}
#opening-modal .window-type-card{min-height:130px;aspect-ratio:auto;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;box-shadow:none;transform:none}
#opening-modal .window-type-card:hover{z-index:10002;border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#opening-modal .window-type-card.selected{border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#opening-modal .window-type-image{width:100%;height:90px;background:#fff;overflow:hidden}
#opening-modal .window-type-image img{display:block;width:100%;height:90px;padding:0;object-fit:contain}
#opening-modal .window-type-info{position:static;padding:7px 0 0;text-align:left}
#opening-modal .window-type-name{color:var(--ui-text);font-size:14px;font-weight:700;line-height:1.3;text-shadow:none}
#opening-modal .option-card{display:flex;flex-direction:column;position:relative;min-width:0;min-height:130px;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;color:var(--ui-text);cursor:pointer;box-shadow:none;transform:none}
#opening-modal .option-card:hover{z-index:10002;border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#opening-modal .option-card.selected{border-color:var(--ui-purple);background:var(--ui-purple-soft);box-shadow:none}
#opening-modal .option-image{display:block;width:100%;height:90px;padding:0;background:#fff;object-fit:contain}
#opening-modal .option-name{padding:7px 0 0;color:var(--ui-text);font:700 14px/1.3 "Segoe UI",Arial,sans-serif;text-align:left}
#glazing-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;overflow:hidden;border-radius:9px}
#glazing-modal .modal-header{flex:0 0 auto;padding:15px 20px}
#glazing-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#glazing-modal .glazing-filters{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;overflow-x:auto;border-bottom:1px solid #dce3e8;background:#f9fafb}
#glazing-modal .filter-btn{padding:7px 12px;border:2px solid var(--ui-border);border-radius:5px;background:#fff;color:var(--ui-text);font:600 13px/1.3 "Segoe UI",Arial,sans-serif;box-shadow:none;transform:none}
#glazing-modal .filter-btn:hover{border-color:var(--ui-purple);background:#faf7ff;color:var(--ui-purple-dark)}
#glazing-modal .filter-btn.active{border-color:var(--ui-purple)!important;background:var(--ui-purple)!important;color:#fff!important}
#glazing-modal .modal-body{min-height:0;padding:20px;overflow-y:auto}
#glazing-modal .glazing-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;padding:0}
#glazing-modal .glazing-card{display:flex;flex-direction:column;align-items:stretch;position:relative;min-width:0;min-height:130px;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;color:var(--ui-text);text-align:left;box-shadow:none;transform:none}
#glazing-modal .glazing-card:hover{border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#glazing-modal .glazing-card.selected{border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#glazing-modal .glazing-card-image{display:block;width:100%;max-width:none;height:90px;margin:0;padding:0;background:#fff;object-fit:contain}
#glazing-modal .glazing-card-name{margin:0;padding:7px 0 0;color:var(--ui-text);font:700 14px/1.3 "Segoe UI",Arial,sans-serif;text-align:left}
#glazing-modal .glazing-card-specs{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:7px;padding-top:7px;border-top:1px solid #e0e6ea;color:#526775;font:600 11px/1.25 "Segoe UI",Arial,sans-serif}
#glazing-modal .glazing-card-specs span:nth-child(even){text-align:right}
#glazing-change-btn:disabled,.glazing-filters .filter-btn:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(.65)}
#glazing-display.selection-unavailable{opacity:.68}
#glazing-modal .glazing-card-checkmark{background:var(--ui-purple)}
#handle-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;overflow:hidden;border-radius:9px}
#handle-modal .modal-header{flex:0 0 auto;padding:15px 20px}
#handle-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#handle-modal .handle-color-filters{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;overflow-x:auto;border-bottom:1px solid #dce3e8;background:#f9fafb}
#handle-modal .handle-color-filter{display:flex;align-items:center;gap:7px;padding:7px 12px;border:2px solid var(--ui-border);border-radius:5px;background:#fff;color:var(--ui-text);font:600 13px/1.3 "Segoe UI",Arial,sans-serif;white-space:nowrap;cursor:pointer}
#handle-modal .handle-color-filter:hover{border-color:var(--ui-purple);background:#faf7ff;color:var(--ui-purple-dark)}
#handle-modal .handle-color-filter.active{border-color:var(--ui-purple);background:var(--ui-purple);color:#fff}
#handle-modal .handle-color-swatch{width:16px;height:16px;flex:0 0 16px;border:1px solid #aeb7bd;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff70}
#handle-modal .modal-body{min-height:0;padding:20px;overflow-y:auto}
#handle-modal .handle-grid{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;padding:0}
#handle-modal .handle-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;position:relative;min-width:0;min-height:165px;padding:10px;overflow:visible;border:2px solid var(--ui-border);border-radius:6px;background:#fff;color:var(--ui-text);text-align:left;box-shadow:none;transform:none}
#handle-modal .handle-card:hover{border-color:var(--ui-purple);background:#faf7ff;box-shadow:none;transform:none}
#handle-modal .handle-card.selected{border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#handle-modal .handle-card.hidden{display:none}
#handle-modal .handle-card-image{display:block;width:100%;max-width:none;height:90px;max-height:90px;margin:0;padding:0;background:#fff;object-fit:contain}
#handle-modal .handle-card-type{margin:0;padding:7px 0 0;color:var(--ui-text);font:700 14px/1.3 "Segoe UI",Arial,sans-serif;text-align:left}
#handle-modal .handle-card-color{margin:3px 0 0;color:var(--ui-muted);font:400 12px/1.3 "Segoe UI",Arial,sans-serif;text-align:left}
#handle-modal .handle-card-price{margin:4px 0 0;color:var(--ui-purple-dark);font:600 13px/1.3 "Segoe UI",Arial,sans-serif;text-align:left}
#handle-modal .handle-card-checkmark{background:var(--ui-purple)}
#color-interior-modal .modal-content,#color-exterior-modal .modal-content{width:min(900px,94vw);max-width:900px;max-height:86vh;overflow:hidden;border-radius:9px}
#color-interior-modal .modal-header,#color-exterior-modal .modal-header{flex:0 0 auto;padding:15px 20px}
#color-interior-modal .modal-header h3,#color-exterior-modal .modal-header h3{margin:0;color:var(--ui-text);font:700 18px/1.3 "Segoe UI",Arial,sans-serif}
#color-interior-modal .modal-body,#color-exterior-modal .modal-body{min-height:0;padding:20px;overflow-y:auto}
#color-interior-modal .color-category,#color-exterior-modal .color-category{margin:0 0 20px}
#color-interior-modal .color-category:last-child,#color-exterior-modal .color-category:last-child{margin-bottom:0}
#color-interior-modal .category-title,#color-exterior-modal .category-title{margin:0 0 10px;padding:0 0 7px;border-bottom:1px solid #dce3e8;color:var(--ui-text);font:700 14px/1.3 "Segoe UI",Arial,sans-serif}
#color-interior-modal .color-grid,#color-exterior-modal .color-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;max-height:none;padding:0;overflow:visible}
#color-interior-modal .color-card,#color-exterior-modal .color-card{display:flex;flex-direction:column;align-items:stretch;position:relative;min-width:0;min-height:112px;aspect-ratio:auto;padding:10px;overflow:hidden;border:2px solid var(--ui-border);border-radius:6px;background:#fff!important;background-image:none!important;color:var(--ui-text);text-align:left;box-shadow:none;transform:none}
#color-interior-modal .color-card:hover,#color-exterior-modal .color-card:hover{border-color:var(--ui-purple);background:#faf7ff!important;box-shadow:none;transform:none}
#color-interior-modal .color-card.selected,#color-exterior-modal .color-card.selected{border-width:2px;border-color:var(--ui-purple)!important;background:var(--ui-purple-soft)!important;box-shadow:none}
#color-interior-modal .color-card-preview,#color-exterior-modal .color-card-preview{display:block;width:100%;height:70px;flex:0 0 70px;margin:0;padding:0;border:1px solid #c8d0d5;border-radius:0;background-position:center;background-size:cover}
#color-interior-modal .color-card-name,#color-exterior-modal .color-card-name{margin:0;padding:7px 0 0;color:var(--ui-text);font:700 14px/1.3 "Segoe UI",Arial,sans-serif;text-align:left;word-break:normal}
#color-interior-modal .color-card.selected .color-card-name,#color-exterior-modal .color-card.selected .color-card-name{color:var(--ui-purple-dark)}
#color-interior-modal .color-card.selected::after,#color-exterior-modal .color-card.selected::after{top:45px;left:50%;font-size:22px}
.dimension-range{color:var(--ui-muted)}
@media(max-width:1024px){.layout{grid-template-columns:1fr}}
@media(max-width:768px){.panel-left,.panel-right{padding:16px}.panel-left>h3,.panel-right>h3{font-size:16px}.panel-right .summary-item{grid-template-columns:1fr 1fr}#profile-modal .profile-grid,#window-type-modal .window-type-grid,#glazing-modal .glazing-grid,#handle-modal .handle-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}#opening-modal .window-type-grid,#color-interior-modal .color-grid,#color-exterior-modal .color-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}#glazing-modal .glazing-filters,#handle-modal .handle-color-filters{flex-wrap:nowrap}}