/*
Stylesheet specifiek voor de productconfigurator (zonder woocommerce)
*/
/* Colors */
:root {
	--blauw: #56aba4;
	--groen: #3ba934;
	--tekst: #2e2e2e;

  }

#tooncontrole {position:fixed;right:0px;bottom:20%;border-radius: 5px 0px 0px 5px;-webkit-border-radius: 5px 0px 0px 5px;background-color: var(--groen);color: #fff;padding: 20px;cursor: pointer;}

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

#stappencontent {color: var(--tekst);font-size:16px;font-size:1rem;max-width: 1030px;margin:0 auto;}
a, .headerstap {font-weight: bold;color: var(--blauw);}
h2 {color: var(--groen);font-size: 1.625rem;line-height: 5rem;font-weight:700;margin:0px;}
h3 {color: var(--groen);font-size: 1.2rem;font-weight: 700;}
.flexbox50.rechts h3 {margin-top:20px;}
.flexcontainer {display:flex;flex-wrap:wrap;width:100%;justify-content: space-between;}
.flexbox20 {width:19%;}
.flexbox30 {width:29%;}
.flexbox33 {width:32%;}
.flexbox40 {width:39%;}
.flexbox50 {width:49%;}
.flexbox60 {width:59%;}
.flexbox70 {width:69%;}
.flexbox100 {width:100%;}

button, .button {color: var(--tekst);background-color: #ffffff;border: 2px solid #969696;min-width: 178px;padding: 16px;border-radius: 5px; font-weight: 700;}
.dashicons {position: relative;transition: all 0.2s ease-in-out, background-position 0.2s;left: 0px;}
.flexcontainer.producten button, .flexcontainer.producten .button, input[type="submit"] {background-color: var(--blauw);color:#fff;border: none;}

/* ## stappennavigatie */
ul.stappennav {display:flex;flex-direction: row;justify-content: center;margin: 0;width: 100%;list-style: none;padding: 80px 0;}
ul.stappennav li {width: 25%;margin: 0;padding: 0 3px;text-align: center;position: relative;pointer-events: none;}
ul.stappennav li:first-child::before {background-color: var(--groen);content: "";position: absolute;height: 2px;width: calc(50% - 27px);top: -27px;right: calc(50% + 27px);}
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);}
ul.stappennav li a .label {width:100%;display: inline-block;padding-top: 30px;text-align: center;color: var(--tekst);font-size: 1rem;text-decoration: none;font-weight: bold;}
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: var(--groen);font-weight: bold;}
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;}
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 */
.headerstap {position:relative;height:40px;top:40px;text-align:right;}

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


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

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

/* ## pagina 2 */
#product-details .thumb {display:none;}
#product-details .thumb:first-child {display:block;}
.slider {position:relative;}
.slidernav {position:absolute;max-width: 450px;top:50%;}
.slidernav .next, .slidernav .previous {opacity:0.2;}
.slidernav .previous.active, .slidernav .next.active  {opacity:1;cursor:pointer;}
.slidernav .dashicons {position:absolute;}
.slidernav .previous .dashicons {left:5px;}
.slidernav .next .dashicons {left:unset;right:5px;}
#beschrijving {padding: 0 50px 50px 0;}
.starttekst {font-size:80%;padding-bottom: 20px;font-style: italic;}
#stap2 .summary {width: calc(100% - 80px);
  min-height: 200px;
  background-color: var(--groen);
  color: #fff;
  padding: 35px;
  float: right;
  position: relative;}
#stap2 .summary::after {
content: " ";
  position: absolute;
  left: -30px;
  top: calc(50% - 45px);
  border-top: 45px solid transparent;
  border-right: 30px solid var(--groen);
  border-left: none;
  border-bottom: 45px solid transparent;}
#stap2 .summary h3 {color:#fff;margin: 0 0 30px 0;}
#stap2 .button-summary {width:100%;border-radius: 5px;text-align: left;background-color: var(--blauw);color: #fff;border: none;}
#stap2 .button-summary:hover {box-shadow: 1px -1px 10px -1px rgba(0, 0, 0, 0.15);transition: box-shadow 0.2s ease-in-out;}
#stap2 .button-summary[disabled] {color: #c2c2c2;border:2px;background-color: revert;}
#stap2 .filter-reset{clear: both;padding: 35px;max-width: calc(100% - 80px);margin-left: auto;}
#stap2 .filter-reset a {text-decoration:none;}
#stap2 .dashicons-info-outline {color:var(--groen);}
#stap2 .control, #dakraammaat, #bediening, #dakkapelmaat, #dkraam {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;}
#dakraammaat, #bediening, #dakkapelmaat, #dkraam {padding-left:20px;}
#stap2 .control input {position: absolute;
  z-index: -1;
  opacity: 0;}
#stap2 .control-radio .control_indicator {
  border-radius: 50%;}
#stap2 .control_indicator {
  position: absolute;
  top: 19px;
  left: 14px;
  height: 28px;
  width: 28px;
  background: #ffffff;
  border: 2px solid #dfdfdf;}
#stap2 .control_indicator .dashicons, .upsellthumb .checkbox_indicator .dashicons {display:none;}
#stap2 .control:hover, #stap2 .control:hover input ~ .control_indicator, #stap2 .control input:focus ~ .control_indicator, #dakraammaat:hover {border-color: var(--blauw);}
#stap2 .control.actief {border-color: var(--blauw);}
#stap2 .control.actief .control_indicator {border-color: var(--blauw);background-color:var(--blauw);}
#stap2 .control.actief .control_indicator .dashicons {display:block;color:#fff;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);}
#prijs-berekening ul, #platdak-prijs-berekening ul {margin-left: 50px;margin-bottom: 30px;}
#prijs-berekening ul li, #platdak-prijs-berekening ul li {list-style-type: disc;}
.letop {color:rgba(255,255,255,0.5);margin-bottom: 30px;}

/* 2-2-2026 */
.flexcontainer.cards .flexbox33, .flexcontainer.cards .flexbox50 {border: 1px solid #e9e9e9;border-radius: 5px;padding: 8px;}
.flexcontainer.cards .flexbox33:hover, .flexcontainer.cards .flexbox50:hover {border: 1px solid var(--blauw);box-shadow: 1px -1px 10px -1px rgba(0, 0, 0, 0.15);transition: box-shadow 0.2s ease-in-out;}
.flexcontainer.totaalprijs {padding:30px 0px;}
.totaalprijs h3 {margin:0 0 5px 0 !important;}
.totaalprijs .infotekst {font-size:14px}
#totaalprijs {text-align: right;font-weight: 700;font-size: 19px;font-size: 1.438rem;}


/* ## accessoires */
.upsellthumb {position:relative;}
.upsellthumb:hover {cursor: pointer;}
.upsellthumb img {width:100%;border-radius: 5px;}
.upsellname, .upsellprice {font-size:14px;}
.upsellname {font-weight: 700;}
.upsellthumb input {position: absolute;opacity:0}
.upsellthumb .checkbox_indicator-container {position: absolute;top: 5px;right:5px;}
.upsellthumb .control-checkbox strong {position: absolute;right: 35%;}
#stap2 .upsellthumb .control_indicator {position: absolute;bottom: 4px;left: calc(150px - 20%);width: 28px;height: 28px;background-color:#fff;border:2px var(--blauw) solid;border-radius: 50%;top: unset;}
.upsellthumb .checkbox_indicator {width: 28px;height: 28px;background-color: #fff;border: 2px var(--blauw) solid;border-radius: 50%;}
.upsellthumb .checkbox_indicator.meerkeuze {border-radius:0%;}
.upsellthumb input:checked ~ .checkbox_indicator, #stap2 .upsellthumb input:checked ~ .control_indicator {background-color: var(--blauw);border:1px #fff solid;}
.upsellthumb input:checked ~ .checkbox_indicator .dashicons, #stap2 .upsellthumb input:checked ~ .control_indicator .dashicons {display:block;color:#fff;position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.upsellthumb .dashicons-remove {font-size: 150px;width: 150px;height: 150px;background-color: #ccc;}
.upsellgekozen {display:none;}
.upsellgekozen h3 {margin-bottom:10px;}
#controle {display:none;}
.infocontent, .uspcontent {display:none;font-size: 14px;color: #333;font-weight: 300;background-color: #fff;border: 1px solid var(--groen);padding: 30px;margin: 10px auto;}

/* ## dakkapel */
.usps, .usps-variatie {font-size:14px;}
.usps-variatie {padding:10px;}
.usps-variatie h3 {margin:0px !important;color:var(--tekst);}
.usps-variatie ul {padding:10px 10px 10px 24px;list-style: url(images/list-tick.png);}

/* ## Stap 3 */
#aanvraagformulier .flexcontainer {margin-bottom:10px;}
.customcheck { display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 10px;
  left: 0;
  height: 25px;
  width: 25px;
  border: solid 1px #ddd;
}
/* Hide the browser's default checkbox */
.customcheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
  background-color: #eee;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
  background-color: var(--blauw);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* ## Stap 4 */
#stap4 h3 {margin-top: 20px;}

.close {border:1px solid #000;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: 20px;
  right: 20px;}
.close div {position:absolute;top: -4px;left: 4px;}

#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;
}

.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) {
  .content {width: 90%;}
}

@media only screen and (max-width: 810px) {
  .title-area {margin-left: 0px;}
  #stap1 .producten .flexbox50 {width: 50%;}
  #stap2 #product-details > .flexcontainer {flex-direction: column-reverse;}
  #stap2 #product-details > .flexcontainer .flexbox50.rechts {margin-bottom:70px;}
  #stap2 .flexbox50 {width:100%;}
  #stap2 .flexbox50 .thumb {text-align:center;}
  #stap2 #beschrijving {padding:0}

}

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

@media only screen and (max-width: 427px) {
  ul.stappennav li a .label { font-size: 0.5rem;}
}