/* style.css */



:root {

	--background-color : 								#ebf6f7;

    --heading-color:                                    #501b65;

    --button-text-color:                                #501b65;

    --button-bg-color:                                  #fab600;

    --button-hover-text-color:                          #ffffff;

    --button-hover-bg-color:                            #501b65;

    --button-padding:                                   7px 55px 7px 18px;

    --button-bg-image:                                  url(/wp-content/uploads/2024/02/pijl-rechts-paars.png);

    --button-hover-bg-image:                            url(/wp-content/uploads/2024/02/pijl-rechts-wit.png);

    --button-border-radius:                             25px;

    --button-text-decoration:                           none;

    --button-font-family:                               'Inter', Arial, sans-serif;

    --button-font-weight:                               600;

    --aanvullend-background-color:                      #f4fafb;

    --text-hover-color:                                 #006ab4;

}



.nd-calculator {

	padding: 30px 60px;

    margin: 0 0 30px;

    background-color: var(--background-color);

    border-radius: 5px;

}

.nd-calculator h2 {margin-top:0; }

.nd-calculator table tr th {text-align: left; padding-bottom:5px; color: var(--heading-color);}

.nd-calculator table tr.tussenrij td {color:var(--heading-color); padding-top:30px; /*padding-bottom:0px;*/}

.nd-calculator table tr td {padding-top:15px; vertical-align:text-top;}

.nd-calculator table tr td.nd-price, .nd-calculator table tr th#nd_total, .nd-calculator table tr th.price {text-align:right;}

.nd-calculator .tekst {margin-left:0!important; font-style:normal!important;}

.nd-calculator tr.nd-toggle td label:first-child {margin-left:-4px; margin-right:8px;}

.nd-calculator input.nd-qty { width: 100px; text-align: right; padding-right:15px; box-sizing: border-box; background-color: var(--aanvullend-background-color);}

.nd-calculator input[type="number"]::-webkit-inner-spin-button {

    width: 30px; /* Groter maken voor extra ruimte */

    position: relative;

    right: -15px; /* Pijltjes naar rechts verschuiven */

}



.nd-calculator .button {margin-bottom:10px;}

.nd-calculator .button a {

    background-color: var(--button-bg-color); 

    color: var(--button-text-color); 

    padding:var(--button-padding);

    background-image: var(--button-bg-image);

    background-repeat: no-repeat;

    background-position: center right 18px;

    border-radius: var(--button-border-radius); 

    text-decoration: var(--button-text-decoration);

    font-family: var(--button-font-family);

    font-weight: var(--button-font-weight);

}



.nd-calculator .button a:hover {

    background-color: var(--button-hover-bg-color);

    color: var(--button-hover-text-color);

    background-image: var(--button-hover-bg-image);

}



.nd-calculator table td:first-child, .nd-calculator table th:first-child {width:70%;}

.nd-calculator table td:nth-child(2), .nd-calculator table td:nth-child(3), .nd-calculator table th:nth-child(2), .nd-calculator table th:nth-child(3) {width:15%;}



.nd-calculator table div.tekst { margin-left:30px; font-style: italic;}



.nd-calculator table.aanvullendekosten {

    background-color:var(--aanvullend-background-color);

    margin-top:30px;

    /*margin-left:-30px;*/

    padding-left:30px;

    padding-right:30px;

    padding-bottom:30px;

    width:calc(100% + 60px);

}



.nd-calculator table.totaal {

    margin-top:35px;

    margin-bottom:35px;

}

.nd-help-block {

    display: inline;

}

span.nd-help-toggle {

    margin-left: 15px;

}

.nd-help-toggle i::before { color:var(--text-hover-color)!important; }

.nd-help-content {

    padding: 15px;

    font-size:1rem;

    margin-right:5px 30px 5px 5px;

    background-color:#ffffff;

}



@media screen and (max-width:440px) {

    .nd-calculator {padding:4% 3%!important; margin:0 1%!important; width:98%!important;}

    .nd-calculator table {table-layout:auto;}

    .nd-calculator table th, .nd-calculator table td {padding-left:0!important; padding-right:0!important;}

    .nd-calculator table tr td {vertical-align: top; padding-bottom:15px;}

    .nd-calculator table tr.tussenrij td {padding-top:20px;}

    .nd-calculator table.hoofdproduct tr td.producttekst {width:70%!important;}



    .nd-calculator table .producttekst .tekst {margin-left:5px!important; font-size:0.9em}

    .nd-calculator tr.nd-toggle td label {display:block;}

   /* .nd-calculator tr.nd-toggle td:first-child { padding-left: 5px!important; } */

    .nd-calculator input.nd-qty { width: 60px; padding:0 }

    .nd-calculator tr.nd-toggle td label { margin-left:-4px; margin-right:0!important; }



    .nd-calculator table.hoofdproduct td.productvraag {width:50%!important; }

    .nd-calculator table.hoofdproduct td.productantwoord {width:10%!important; }

    

    .nd-calculator table.aanvullendekosten { margin-left:0; width:100%; padding-left:1%!important; padding-right:1%!important; box-sizing:border-box; border-collapse:unset; }

   /* .nd-calculator table.aanvullendekosten tr.tussenrij td {padding-left:5px!important; padding-right:5px;} */

    .nd-calculator table.aanvullendekosten tr.nd-toggle td:first-child() {padding-left:5px!important;}

    .nd-calculator table.aanvullendekosten tr.nd-toggle td label {display:block;}

    .nd-calculator table.aanvullendekosten tr.nd-toggle td.productvraag { width:55%; }

    .nd-calculator table.aanvullendekosten tr.nd-toggle td.productantwoord { width:20%!important; }

    .nd-calculator .nd-price {width:24%!important; }

    .nd-calculator .nd-toggle .nd-price {width:21%!important; }

        .nd-calculator th.price, .nd-calculator th#nd_total {width:24%!important; }

    .nd-calculator .nd-help-content {margin:5px 5px 5px 0; padding:10px; }

    .nd-calculator table.totaal th#nd_total {width:25%!important;}

}