/* 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
}


.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 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;}
.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;
    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-content {
    padding: 24px;
}
@media screen and (max-width:440px) {
    .nd-calculator {padding:10px!important;}
    .nd-calculator table tr td {vertical-align: top; padding-bottom:15px;}
    .nd-calculator table tr td:first-child {padding-right:10px; width:54%!important;}
    .nd-calculator table tr td:nth-child(2), .nd-calculator table tr td:nth-child(3) {width:23%;}
    .nd-calculator tr.nd-toggle td label {display:block;}
    .nd-calculator input.nd-qty { width: 60px; }
    .nd-calculator tr.nd-toggle td label { margin-left:-4px; margin-right:0!important; }
    .nd-calculator table.aanvullendekosten { margin-left:-15px; width:calc(100% + 30px); padding-left:15px; padding-right:15px; }

}