/*CONFIGURATOR */
.post-content:has(#configurator)>div  {
padding:0;}

#content #configurator h1 {
text-align:center;}

#content #configurator .woocommerce-privacy-policy-text p  {
font-size:14px!important;
line-height: 26px}

.fusion-layout-column:has(#configurator) {
margin:0;}

#configurator #conf-wrapper #preview-img img{
position:sticky;
transform:scale(1.5);
top:250px}

#configurator #conf-sidebar {
position: relative;    
display: flex}

@media (min-width: 640px){
#configurator #conf-wrapper {
display: flex;
justify-content:space-between; 
flex-wrap:wrap}

#configurator #conf-wrapper #preview-img{
width:65%;
padding-right:50px}

#configurator #conf-sidebar {
width:35%;
flex-direction: column; 
justify-content: space-between}
}

#configurator #conf-sidebar ul.picker{
display: flex;
justify-content:center;
width: 100%;
padding:0;
margin-bottom: 30px;
list-style:none}

#configurator #conf-sidebar .novus-configurator__equipment-packages{
display:grid;
gap:12px;
width:100%;
padding:0;
margin:0;
list-style:none}

#configurator #conf-sidebar .novus-configurator__equipment-packages > li{
display:flex;
justify-content:space-between;
gap:16px;
padding:16px;
border-radius:12px;
cursor:pointer}

#configurator #conf-sidebar .novus-configurator__equipment-packages > li.selected{
outline: 2px solid #6b75ff}

#configurator #conf-sidebar .novus-configurator__equipment-packages input{
flex:0 0 auto;
margin-top:4px}

#configurator #conf-sidebar .novus-configurator__equipment-packages .novus-configurator__equipment-list{
margin:12px 0 0;
padding-left:18px}

#configurator #conf-sidebar .novus-configurator__equipment-package-name{
display:block;
color:var(--novus-ink)}

#configurator #conf-sidebar .novus-configurator__equipment-package-price{
display:block;
color:var(--novus-muted);
margin-top:4px}

#configurator .conf-cost{
align-items: center;   
justify-content: space-between;
z-index: 9999;
padding:0;
position:sticky;
border-radius:20px 20px 0 0;
background:#F0F0F2;
transition:.3s;
bottom:0;
display: flex;
box-shadow: -5px -5px 9px #fff, 2px 2px 12px #ccc;
padding:15px}

#configurator .conf-cost p >span{
color: #383838 !important;
font-size: 30px !important;
display:block;
font-weight: 600;}

#configurator .conf-cost p {
margin:0;}

#configurator .conf-cost p.total {
display:none}

#configurator:has(ul.finance-options li:first-child.selected)  p.cash-total{
display:block}

#configurator:has(ul.finance-options li:last-child.selected)  p.finance-total{
display:block}

#configurator ul.overview {
display: flex;
flex-wrap:Wrap;
width: 100%;
padding:0;
margin-bottom: 30px}

#configurator ul.overview li {
min-width:50%}

#configurator ul.finance-options {
display: flex;
justify-content:center;
width: 100%;
padding:0;
margin-bottom: 30px;
list-style:none;    
position:relative}

#configurator ul.finance-options::after{
content: "";
display: block;
position: absolute;
left: -20px;
right: -20px;
bottom: 0;
border-bottom: 1px solid #bdbdbd}
  
#configurator #conf-sidebar ul.finance-options li{
position:relative;    
padding:0 20px 20px}

#configurator #conf-sidebar ul.finance-options li::before {
display: block;
content: "";
position: absolute;
bottom: 0;
left:0;
width: 100%;
border-bottom: 2px solid transparent}

#configurator #conf-sidebar ul.finance-options li.selected::before {
z-index:2;
border-color: #6b75ff !important}
     
#configurator #conf-sidebar ul li a{
color:#383838}    

.dark-mode #configurator #conf-sidebar ul li a{
color:#adadad}    
    
#configurator #conf-sidebar{
display: flex;
flex-direction: column;
min-height:250px;
position:relative;}

#configurator #conf-sidebar .step-details{
width:100%;   
opacity:1;
justify-content:space-between;
padding: 20px 0;
flex-direction: column;
z-index:2;
transition: 1s;
display: flex}

#configurator  .step-details .details-intro h2, #configurator  .step-details.checkout h2, #configurator .checkout-cust-info h2{
font-size:24px!important;
display: flex;
width: 100%;
position:relative;
align-items: center;
padding-bottom: 10px;
justify-content: space-between; 
margin: 0 0 10px}

#configurator  .step-details .details-intro h2::before{
content:"";
display: block;
position: absolute;
left:-20px;
right:-20px;
bottom:0;
border-bottom: 1px solid #bdbdbd;}

#configurator  .step-details .details-intro h2 span:last-child{
font-size: 13px;
font-weight: 600}

#configurator  .step-details .details-intro p{
color: #595959 !important}

#configurator #conf-sidebar .step-details.active{
z-index:2;
opacity: 1}

#configurator  .step-details .picker{
display: flex;
margin: 0;
padding:0;    
list-style:none}

#configurator  .step-details .picker li{
box-sizing:border-box;
cursor:pointer;
position: relative;
transition:.3s;
padding: 5px;
cursor:pointer;
font-size: 13px; 
line-height: normal}

#configurator  .step-details .picker li img{
transition:.5s;
padding:5px;
border-radius:12px;
display:block}

#content #configurator ul.picker div:has(>img){
transition: .3s;
border-radius: 12px;
position:relative;
box-shadow: -5px -5px 9px #fff, 2px 2px 9px #bbb}

#content #configurator ul.picker div:has(>img)::after {
position:absolute;
top:0;
bottom:0;
opacity:0;
border-radius:inherit;
left:0;
right:0;
content:"";
display: block;
transition:  .3s;
box-shadow: -2px -2px 3px #c9c9d6, 1px 1px 1px #ffffff, inset -2px -2px 2px rgba(245, 245, 247, 0.5), inset 2px 2px 2px rgba(201, 201, 212, 0.25)}

#content #configurator ul.picker li:hover div img, #content #configurator ul.picker li.selected div img{
background:#e6e6e6}
 
#content #configurator ul.picker li:hover div::after, #content #configurator ul.picker li.selected div::after {
 opacity:1;}    

#content #configurator ul.picker li strong {
display:block;
margin-bottom: 5px;}
    
#configurator #conf-sidebar ul.picker.column-picker {
align-items:flex-start;    
flex-direction:column}

#content #configurator ul.picker.model-picker {
justify-content:space-around;}

#content #configurator ul.picker.model-picker li {
text-align:center;
flex:1}

#content #configurator ul.picker.model-picker li img {
width:100%;
aspect-ratio:1/1;
display: block;
border:none;
transform:none;  
transition: box-shadow 3s;
box-shadow: -5px -5px 9px #fff, 2px 2px 12px #ccc;
margin: 0 auto 10px}

#content #configurator ul.picker.model-picker li.selected img,#content #configurator ul.picker.model-picker li img:hover   { 
transition: box-shadow 3s;
box-shadow: 3px 3px 6px #fff,inset 3px 3px 5px #ddd;
background:#EDEDF0}

#content #configurator ul.picker.model-picker li span.selected-text {
display: none}

#content #configurator ul.picker.model-picker li.selected span.selected-text {
display: inline-block}

#content #configurator ul.picker.model-picker li.selected span.unselected-text {
display: none}

#content #configurator ul.picker.column-picker li  {
display:flex;    
border-bottom: 1px solid #d9d9d9;
width: 100%;
justify-content: space-between;
align-items: center;
text-align:left;}

#content #configurator ul.column-picker li::before {
opacity:0;
transition:.3s;
content: ">";
display:inline-block;
position: absolute;
left:-10px;
font-weight:bold;
color: #6b75ff;}

#content #configurator ul.column-picker li:hover::before, #content #configurator ul.column-picker li.selected::before {
opacity:1;}

#content #configurator ul.picker.column-picker li:last-child {
border:0}

#configurator .picker.color-picker li img{
max-height: 60px;}

#configurator  .color-picker li img{
border:2px solid transparent;
padding:5px;
display:block}

#configurator .color-picker li.selected img, #configurator .color-picker li[data-selected="true"] img, #configurator .color-picker li:hover img{
transform:scale(1.1);    
border-color:#6b75ff}

.dark-mode #configurator .brighten.selected img, .dark-mode #configurator .brighten .selected img, .dark-mode  #configurator .step-details .picker li:hover img {
border-color: #434BA0!important}

#configurator .picker.color-picker:not(:has(li:nth-child(5))) li img{
height: 60px;}

@media (max-width:1023px){
#configurator .picker.color-picker {
flex-wrap:wrap}

#configurator .picker.color-picker li{
width:25%;}
}
#configurator .picker.column-picker li img {
height: 100px;}

#content #configurator .picker.color-picker img {
border-radius:100%}

#configurator .step-details  p.supplement {
margin: 0;
margin-right: auto;
font-size: 15px;
padding-left: 10px}

#configurator .step-details:has(li[data-rel="None"].selected) p.supplement, #configurator .step-details:not(:has(li.selected)) p.supplement {
opacity:0;} 

#configurator  .placement-picker li{
text-align: center;
flex: 1}

#configurator  .placement-picker li img{
margin-bottom:10px;}

#configurator  .picker.checker li {
flex: 1;
display: flex; 
justify-content: space-between;
align-items: center;
outline: 2px solid #d9d9d9;
margin: 0 20px;
border-radius: 12px;
padding: 10px;}

#configurator  .picker.checker li.selected, #configurator  .picker.checker li:hover {
outline: 2px solid #6b75ff}

#configurator #conf-sidebar .price-info {
display: table;
cursor:pointer;
margin: 0 auto 50px;
position: relative}

.dark-mode #configurator #conf-sidebar .price-info {
color:#adadad}

#configurator #conf-sidebar .price-info::after {
display:block;    
content:"";
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #383838;
right: -14px;
top: 10px;
position: absolute}

.dark-mode #configurator #conf-sidebar .price-info::after {
border-top: 5px solid #adadad}

#configurator #conf-sidebar input[type=checkbox], #configurator #conf-sidebar input[type=radio] {
width:18px;
height:18px}

#configurator #conf-sidebar li input[type=radio] {
padding: 4px;
outline: 1px solid #383838;
appearance:none;    
border-radius: 100%}

#configurator #conf-sidebar li.selected input[type=radio], #configurator #conf-sidebar input[type=radio][checked=checked] {
background: #6b75ff}

#configurator #conf-sidebar .summary ul {
flex-direction:column}

#configurator #conf-sidebar .summary ul li, #configurator #conf-sidebar .novus-checkout-deposit {
margin-bottom: 20px;
display:flex;
justify-content:space-between}

#configurator #conf-sidebar .summary ul li strong, #configurator #conf-sidebar .summary ul li span:last-child, #configurator #conf-sidebar .novus-checkout-deposit strong, #configurator #conf-sidebar .novus-checkout-deposit span:last-child {
font-size: 22px;
font-weight: 600;
display:block}

#configurator #conf-sidebar .summary ul li span a {
font-size: 14px;
text-decoration: underline;
color: #666 }

#configurator .checkout-cust-info div, #configurator form#payment  {
max-height: 0;
overflow: hidden;
transition: 1s}

#configurator #conf-sidebar .checkout-cust-info div ul{
display: block;}

#configurator #conf-sidebar .checkout-cust-info div ul li{
display:flex;    
padding: 5px;
border-bottom:1px solid #d9d9d9;
justify-content:flex-start}

#configurator #conf-sidebar .checkout-cust-info div strong{
padding-right: 5px}

#configurator #conf-sidebar .checkout-cust-info div span:last-child{
margin-left:auto;}

#configurator #conf-sidebar .checkout-cust-info div ul li:last-child{
border:none}

#configurator .checkout-cust-info.expanded div, #configurator form#payment.expanded{
padding:10px;    
max-height: 1000px}

/* hide native WooCom checkout sections */
#configurator #conf-sidebar .novus-shipping-options, #configurator #conf-sidebar #order_review_heading, #configurator #conf-sidebar .woocommerce-checkout-review-order-table {
display: none !important }

/* WooCommerce still requires these fields for checkout validation and rate calculation. */
#configurator #conf-sidebar #shipping_country_field,
#configurator #conf-sidebar #billing_country_field {
display: none !important }

#configurator .novus-payment-buttons {
margin: 0 auto 30px }

#configurator .payment_box iframe {
height: 25px !important; }

#configurator .novus-configurator-checkout .woocommerce-error {
background-color: rgba(219, 75, 104, 0.1);
border: 1px solid #db4b68;
color: #383838;
border-radius: 0px 0px 0px 0px;
padding: 10px }

#configurator  form >input {
width:100%;
margin-bottom: 20px;
padding: 0px 20px;    
transition:.4s;
border:none;
background: #EAEAEC;
height: 40px;
line-height: 40px;
font-size: 16px;
border-radius: 6px;
box-shadow: -3px -3px 4px #ffffff, 3px 3px 4px #c9c9d6;}

#configurator form select {
width: 100%;
padding: 0 15px }

#configurator  form input:focus, #configurator  form input:hover {
background: linear-gradient(180deg, #451BCF, #3412A3);
background:#3C16B9;
color: #fff;
font-weight: 600;
box-shadow: -2px -2px 3px #8d8fb0, 2px 2px 3px #ffffff, inset 3px 3px 6px #18004a, inset -3px -3px 6px #6b75ff}

#configurator  form input:focus::placeholder, #configurator  form input:hover::placeholder  {
color: #fff}

#configurator  form >input:not(:placeholder-shown):not(:focus) {
background: #e6e6ed;
color: #585859;
font-weight: 500;
box-shadow: -2px -2px 3px #c9c9d6, 1px 1px 1px #ffffff, inset -2px -2px 2px rgba(245, 245, 247, 0.5), inset 2px 2px 2px rgba(201, 201, 212, 0.25)}

#configurator form input.fusion-button{
width:auto;
margin:20px auto;
display: table}

#configurator form button#place_order {
margin-bottom: 30px }

#configurator .step6, #configurator .step7 {
transition:.2s;
max-height: 1000px}

#configurator .step6.hidden, #configurator .step7.hidden {
max-height: 0;
transition:2s;
overflow: hidden;
padding: 0 !important;}

#configurator .step5 .details-body {
display:flex;
align-content:center;
justify-content:space-between;}

#configurator .step5  span.item-name{
display:none}

#configurator .step5 ul.sides {
width:50%!important}

#configurator .step5 .finish-images {
position:relative;
width:40%}

#configurator .step5 .finish-images img{
position:absolute;
display:block;
opacity:0;
transition:.3s;
top:0}

#configurator .step5 .finish-images img:first-child, #configurator .step5 .finish-images img.active{
opacity:1}

#configurator #flyout {
position:fixed;
border-radius: 0 12px 12px 0;
box-shadow: -5px -5px 9px #fff, 2px 2px 12px #ccc;
padding:20px;
background:#F0F0F2;
transition: .5s;
transform: translateY(-50%);
left:-100px;
top:50%}

#configurator #flyout.expanded {
left:0}    
    
#configurator #flyout::after {
cursor:pointer;    
content:"";
display: block;
width: 20px;
height: 30px;
background: url(/wp-content/uploads/2026/05/colour-slider-arrow.webp) no-repeat #3412a3;
padding: 5px;
position: absolute;
top: 50%;
right: -30px;
background-size: 12px 15px;
border-radius: 12px 0 0 12px;
transform: scalex(-1);
background-position: 6px center;
z-index: -999999999999999;
transition: .5s}

#configurator #flyout:not(.expanded):hover::after {
padding-left:10px;
right: -35px;    
}    

#configurator #flyout.expanded::after {
border-radius: 0 12px 12px 0;
transform: none}

#configurator #flyout ul{
margin:0;
padding:0;
list-style:none}

#configurator #flyout ul a{
width:56px;
padding:5px;
background: #3412a3;
background: linear-gradient(135deg,rgba(109, 95, 218, 1) 0%, rgba(40, 19, 135, 1) 100%);
display:block;
border-radius:100%;
margin:15px 0;
background-clip: padding-box;
border: 5px solid #3412a3;
overflow: visible;
box-shadow: inset 2px 2px 3px #7266DF, inset -2px -3px 2px #2C1883!important}

#configurator #flyout ul a img{
width: 100%;
display:block;
filter:brightness(10)}

/*Temporary (?) hiding of placement and install type steps */
#configurator .step4, #configurator .step8 {
display:none!important}