/*
Stylesheet specifiek voor de productconfigurator (zonder woocommerce)
*/

.configurator {
  padding:50px 0px 50px 0px;
}

.configurator .header-widget-area {max-width:300px;padding-top:18px;}

.configurator #stappencontent {color: #2e2e2e;font-size:16px;font-size:1rem;max-width: 1030px;margin:0 auto;}
.configurator a, .configurator .headerstap {font-weight: bold;color: #56aba4;}
.configurator h2 {color: #3ba934;font-size: 1.625rem;line-height: 5rem;font-weight:700;margin:0px;}
.configurator h3 {color: #3ba934;font-size: 1.2rem;font-weight: 700;}
.configurator .flexbox50.rechts h3 {margin-top:20px;}
.configurator .flexcontainer {display:flex;flex-wrap:wrap;width:100%;justify-content: space-between;}
.configurator .flexcontainer .alignleft {justify-content: normal;}
.configurator .flexbox30 {width:29%;}
.configurator .flexbox33 {width:32%;}
.configurator #prijsberekening .flexbox33 {width:33.3333%;}
.configurator .flexbox40 {width:39%;}
.configurator .flexbox50 {width:49%;}
.configurator .flexbox60 {width:59%;}
.configurator .flexbox70 {width:69%;}
.configurator .flexbox100 {width:100%;}

.configurator button, .configurator .button {color: #2e2e2e;background-color: #ffffff;border: 2px solid #969696;min-width: 178px;padding: 16px;border-radius: 5px; font-weight: 700;}
.configurator .dashicons {position: relative;transition: all 0.2s ease-in-out, background-position 0.2s;left: 0px;}

/* ## stappennavigatie */
.configurator ul.stappennav {display:flex;flex-direction: row;justify-content: center;margin: 0;width: 100%;list-style: none;padding: 80px 0;}
.configurator ul.stappennav li {width: 25%;margin: 0;padding: 0;text-align: center;position: relative;pointer-events: none;}
.configurator ul.stappennav li:first-child::before {background-color: #3ba934;content: "";position: absolute;height: 2px;width: calc(50% - 27px);top: -27px;right: calc(50% + 27px);}
.configurator ul.stappennav li:not(:last-child)::after {background-color: #e9e9e9;content: "";position: absolute;height: 2px;width: calc(100% - 54px);top: -27px;left: calc(50% + 27px);}
.configurator ul.stappennav li a .label {display: inline-block;padding-top: 30px;text-align: center;color: #2e2e2e;font-size: 1rem;text-decoration: none;font-weight: bold;}
.configurator ul.stappennav li .step-indicator {top: -54px;left: calc(50% - 27px);position: absolute;width: 54px;height: 54px;line-height: 54px;border-radius: 100%;border: 2px solid #e6e6e6;color: #3ba934;font-weight: bold;}
.configurator ul.stappennav li.current .step-indicator{top: -66px;left: calc(50% - 39px);width: 78px;height: 78px;background-image: linear-gradient(to bottom, #abca0a, #54ad28);color: #ffffff;border: 12px solid rgba(59, 169, 52, 0.2);background-clip: padding-box;z-index: 999;}
.configurator ul.stappennav li.done .step-indicator {background-image: linear-gradient(to bottom, #abca0a, #54ad28);border: none;color: #ffffff;background-clip: padding-box;pointer-events: all;}

/* ## header contentstap */
.configurator .headerstap {position:relative;height:40px;top:40px;text-align:right;}

/* ##stappencontenttabs */
.configurator .contentstap {min-height: 100vh;position:relative;}
.configurator #stap3.contentstap {min-height:auto;}
.configurator #stap1 {display:block;}
.configurator #stap2, .configurator #stap3, .configurator #stap4 {display:none;}
.configurator .stapklik {cursor:pointer;}
.configurator #beschrijving ul {padding:20px 20px 40px 30px;list-style: url(images/list-tick.png);}
.configurator #beschrijving ul li {padding-left: 16px;}

/* ## footer contentstap */
.configurator .footerstap {position:absolute;height:40px;bottom:0px;text-align:right;width:100%;}

/* ## pagina 1 */
.configurator #stap1 .producten .flexbox50 {border: 1px solid #e9e9e9;text-align: center;padding: 0 0 20px 0;width: 24%;}
.configurator #stap1 .producten .flexbox50:hover {box-shadow: 1px -1px 20px -1px rgba(0, 0, 0, 0.15);transition: box-shadow 0.2s ease-in-out;}
.configurator #stap1 .producten .flexbox50:hover > .stapklik button, .configurator #stap1 .producten .flexbox50:hover > .stapklik .button {background-color: #56aba4;border-color: #56aba4;color:#fff;}
.configurator #stap1 .producten .flexbox50:hover > .stapklik .dashicons {left:10px;}
.configurator #stap1 .producten .flexbox50 h2 {font-size: 18px;line-height:1.2;}
.configurator .vanafprijs {font-weight:700;margin:20px;}
.configurator #stap1 .producten .flexbox50 img {width:200px;padding-top: 40px;padding-bottom: 30px;}
.configurator .infotekst h4 {font-weight: 700;font-size: 16px;padding: 30px 0;}

/* ## pagina 2 */
.configurator #beschrijving {padding: 0 50px 50px 0;}
.configurator .starttekst {font-size:80%;padding-bottom: 20px;font-style: italic;}
.configurator .sticky {position:sticky;top:35px;}
.configurator #stap2 .summary {width: calc(100% - 80px);
  min-height: 200px;
  background-color: #3ba934;
  color: #fff;
  padding: 35px;
  float: right;
  position: relative;}
.configurator #stap2 .summary::after {
content: " ";
  position: absolute;
  left: -30px;
  top: calc(50% - 45px);
  border-top: 45px solid transparent;
  border-right: 30px solid #3ba934;
  border-left: none;
  border-bottom: 45px solid transparent;}
.configurator #stap2 .summary h3 {color:#fff;margin: 0 0 30px 0;}
.configurator #stap2 .button-summary {width:100%;margin-top:32px;border-radius: 5px;text-align: left;}
.configurator #stap2 .button-summary:hover {color: #2e2e2e;}
.configurator #stap2 .button-summary[disabled] {color: #c2c2c2;}
.configurator #stap2 .filter-reset{clear: both;padding: 35px;max-width: calc(100% - 80px);margin-left: auto;}
.configurator #stap2 .filter-reset a {text-decoration:none;}
.configurator #stap2 .dashicons-info-outline {color:#3ba934;}

.configurator #stap2 .control, .configurator #dakraammaat {display: block;
  position: relative;
  padding: 20px 20px 20px 50px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 2px solid #dfdfdf;
  border-radius: 5px;
  min-height: 70px;
  line-height: 30px;}
.configurator #dakraammaat {padding-left:20px;}
.configurator #stap2 .control input {position: absolute;
  z-index: -1;
  opacity: 0;}
.configurator #stap2 .control-radio .control_indicator {
  border-radius: 50%;}
.configurator #stap2 .control_indicator {
  position: absolute;
  top: 19px;
  left: 14px;
  height: 28px;
  width: 28px;
  background: #ffffff;
  border: 2px solid #dfdfdf;}
.configurator #stap2 .control_indicator .dashicons, .configurator .upsellthumb .checkbox_indicator .dashicons {display:none;}
.configurator #stap2 .control:hover, .configurator #stap2 .control:hover input ~ .control_indicator, .configurator #stap2 .control input:focus ~ .control_indicator, .configurator #dakraammaat:hover {border-color: #56aba4;}
.configurator #stap2 .control.actief {border-color: #56aba4;}
.configurator #stap2 .control.actief .control_indicator {border-color: #56aba4;background-color:#56aba4;}
.configurator #stap2 .control.actief .control_indicator .dashicons {display:block;color:#fff;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.configurator #prijs-berekening .flexbox30 {font-weight:700;font-size:19px;font-size:1.438rem;}
.configurator #prijs-berekening ul {margin-left: 50px;margin-bottom: 30px;}
.configurator #prijs-berekening ul li {list-style-type: disc;}
.configurator .letop {color:rgba(255,255,255,0.5);margin-bottom: 30px;}
/* ## accessoires */
.configurator .upsellthumb {position:relative;}
.configurator .upsellthumb input {position: absolute;bottom: 0px;left: 150px;opacity:0}
.configurator .upsellthumb .checkbox_indicator-container {position: absolute;bottom: 0px;height:20%;width: 100%;}
.configurator .upsellthumb .control-checkbox strong {position: absolute;right: 35%;}
.configurator .upsellthumb .checkbox_indicator, .configurator #stap2 .upsellthumb .control_indicator {position: absolute;bottom: 4px;left: calc(150px - 20%);width: 28px;height: 28px;background-color:#fff;border:2px #56aba4 solid;border-radius: 50%;top: unset;}
.configurator .upsellthumb input:checked ~ .checkbox_indicator, .configurator #stap2 .upsellthumb input:checked ~ .control_indicator {background-color: #56aba4;border:1px #fff solid;}
.configurator .upsellthumb input:checked ~ .checkbox_indicator .dashicons, .configurator #stap2 .upsellthumb input:checked ~ .control_indicator .dashicons {display:block;color:#fff;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.configurator .upsellthumb .dashicons-remove {font-size: 150px;width: 150px;height: 150px;background-color: #ccc;}
.configurator .upsellgekozen {display:none;}
.configurator .upsellgekozen h3 {margin-bottom:10px;}
.configurator #controle {display:none;}
.configurator .infocontent {z-index: 9;position: absolute;top: 0px;background-color: #fff;padding: 10px;width: 150px;border: 1px solid #56aba4;display:none;font-family: 'Montserrat', sans-serif;font-size: 14px;color: #2e2e2e;text-align: left;left: 30px;}

.configurator #loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.configurator .spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #0073aa; /* WordPress blauw */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Media Queries */

@media only screen and (max-width: 1200px) {
  .configurator .content {width: 90%;}
  .configurator button, .configurator .button {min-width: 1px;padding: 8px 8px;}
}

@media only screen and (max-width: 810px) {
  .configurator .title-area {margin-left: 0px;}
  .configurator #stap1 .producten .flexbox50 {width: 50%;}
  .configurator #stap2 .flexbox50 {width:100%;}
  .configurator #stap2 .flexbox50 .thumb {text-align:center;}
}

@media only screen and (max-width: 600px) {
  .configurator .title-area {width:100%;}
  .configurator .header-image .site-title > a {background-position: center;}
  .configurator .header-widget-area {width:100%;max-width: 100%;text-align: center;padding-bottom: 20px;}
  .configurator ul.stappennav li a .label {font-size: 0.7rem;font-weight: 500;}
  .configurator #stap1 .producten .flexbox50 {width: 100%;}
  .configurator #prijs-berekening .flexbox33, .configurator #prijs-berekening .flexbox70, .configurator #prijs-berekening .flexbox30 {width:100%;}
  .configurator #prijs-berekening .flexbox33 br {display:none;}
  .configurator #prijs-berekening .flexbox30 {text-align:left;}
  .configurator #stap3 h2 {line-height:2.2rem; margin-bottom:20px; }
}