/*-------FONTS-------*/
@font-face {
    font-family: 'VolvoNovumMedium ';
    src: url('fonts/VolvoNovum-Medium.woff2') format('woff2'),
        url('fonts/VolvoNovum-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'VolvoNovumLight';
    src: url('fonts/VolvoNovum-Light.woff2') format('woff2'),
        url('fonts/VolvoNovum-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

strong {
    font-family: 'VolvoNovumMedium ';
}

/*----RESET----*/
*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth; 
}

/*-------SPECS-------*/
.bglightgrey {
    background-color:#FAFAFA
}

.black {
    color:#0A0A0A;
}

/*-----STRUCTURE----*/

.maincontainer {
    display:block;
    margin: 0 auto;
    max-width: 1000px;
    /*background-color:red;*/
    height:auto;
}

.main_title {
    position:relative;
    float:left;
    font-family: 'VolvoNovumMedium ';
    color:black;
    font-size: 22px;
    line-height:28px;
    padding: 15px 0 15px 0;
    clear:both;
    width:100%;
}

.main_picture {
    position:relative;
    float:left;
    width:100%;
    margin: 0 0 0 0;
    padding: 0 0 0 0;          
}

.main_picture img {
    width:100%;       
     border-radius: 15px; 
}

/*-----ENQUETE-----*/
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0;
  justify-content: left;
}

.radio-group label {
  width: 60px; /* vaste breedte voor alle knoppen */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  user-select: none;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group input[type="radio"]:checked + span {
  background-color: #004b87;
  color: #fff;
  border-color: #004b87;
}

.radio-group label span {
  display: inline-block;
  width: 100%;
  padding: 4px 0;
  border-radius: 16px;
  transition: background 0.2s, color 0.2s;
}

/* Optioneel: op mobiel extra ruimte rondom */
@media (max-width: 480px) {
  .radio-group {
    justify-content: left;
  }

  .radio-group label {
    width: 45px; /* behoud vaste breedte */
  }
}

/*------HEADER-----*/
header {
    position:relative;
    display:block;
    float:left;
    background-color:#FAFAFA;
    padding: 30px 25px 30px 25px;
    margin: 0 0 0 0;
    width:100%;
    height:auto;
}

#logo {
    position:relative;
    display:block;
    float:left;
    padding: 0;
    margin: 0;
    width:105px;
    height:auto
}

#logo img {
    width:100%;
    height:auto
}

/*------FORM------*/
.formwrapper {
    position:relative;
    display:block;
    float:left;
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 15px;
    line-height:21px;
    padding: 15px 35px 35px 35px;
    background-color:#FAFAFA;
    border-radius:35px;
    width:100%;
    margin: 35px 0 15px 0;
-webkit-box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.09);
-moz-box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.09);
box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.09);    
}

.booking_container {
    position:relative;
    display:block;
    float:left;
    margin: 15px 0 15px 0;
    padding: 0 0 0 0;
    /*background-color:red;*/
    width:100%;
}

.location {
    position:relative;
    float:left; 
    width:25%;
    border-right:1px solid grey;
    margin-right: 15px;
    min-height:100px;
    font-size: 15px;
    line-height:21px;
    padding: 0 0 0 25px;
}

.location .icon {
  position: absolute;
  left: 0px; /* aligns within the padding zone */
  top: 9px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none; /* so it doesn't block clicks if necessary */
}

.days {
    position:relative;
    float:left; 
    width:25%;
    border-right:1px solid grey;
    margin-right: 15px;
    min-height:100px;
    font-size: 15px;
    line-height:21px;
    padding: 0 0 0 25px;
}

.this_day {
  display: flex;
  align-items: center;
  gap: 8px; /* space between radio and text */
  padding: 5px 0;
  cursor: pointer;    
}

.days .icon {
  position: absolute;
  left: 0px; /* aligns within the padding zone */
  top: 9px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none; /* so it doesn't block clicks if necessary */
}

.slots {
    position:relative;
    float:left; 
    width:45%;
    border-right:0px solid grey;
    margin-right: 15px;
    min-height:100px;
    font-size: 15px;
    line-height:21px;
    padding: 0 0 0 25px;
}

.slots .icon {
  position: absolute;
  left: 0px; /* aligns within the padding zone */
  top: 9px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none; /* so it doesn't block clicks if necessary */
}

.radio_label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: 100%;
}

.slot_row:hover {
  background-color: #f8f8f8;
}

.slot_text {
  font-size: 15px;
  line-height: 1.5;
}

.other_data {
    position:relative;
    display:block;
    float:left;
    margin: 15px 0 15px 0;
    padding: 0 0 0 0;
    /*background-color:red;*/
    width:100%;
}

.spacer15 {
    position:relative;
    display:block;
    float:left;
    margin: 15px 0 0 0;
    padding: 0 0 0 0;
    /*background-color:red;*/
    width:100%;
}

.spacer35 {
    position:relative;
    display:block;
    float:left;
    margin: 35px 0 0 0;
    padding: 0 0 0 0;
    /*background-color:red;*/
    width:100%;
}

.form-input input {
    width: 50%;
    padding: 5px 5px 5px 5px;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  width:100%;    
  max-width: 100%;
}

.form-consent_text {
  font-size: 12px;
  line-height: 1.5;
  padding: 0; /* Belangrijk: 30% padding verwijderen */
}

.form-consent_text a {
  color: black;
}

.submitbutton {
  background-color: #284E80; /* Primary blue */
  color: white;
  border: none;
  padding: 10px 40px;
  font-size: 16px;
  border-radius: 2px; /* Optional: slightly rounded corners */
  cursor: pointer;
  transition: background-color 0.3s ease;
 font-family: 'VolvoNovumMedium ';   
float:right;    
}

.submitbutton:hover {
  background-color: black; /* Slightly darker blue on hover */
}

.submitbutton:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}


/*------TEXT------*/
.maintext {
    position:relative;
    display:block;
    float:left;
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 16px;
    line-height:21px;
    text-align:center;
    padding: 3% 15% 0 15%;
}

.maintextbevestiging {
    position:relative;
    display:block;
    float:left;
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 16px;
    line-height:21px;
    text-align:center;
    padding: 3% 15% 0 15%;
    width:100%;
}

.loc_title {
text-transform:uppercase;
font-family: 'VolvoNovumMedium ';   
font-size:14px;    
}

p {
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 16px;
    line-height:21px;
}

.small {
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 12px;
    line-height:14px;
    padding: 0;
    text-align:left;
}

.textleft {
    text-align:left;
}

#langswitch {
position:relative;    
display:block;
float:right;
margin: 0 15px 0 0;
text-transform:uppercase;
font-family: 'VolvoNovumMedium ';   
font-size:14px;    
}

#langswitch a {
color:black;
text-decoration:none;
font-family: 'VolvoNovumLight';   
}

/*------MAP------*/
.mapwrapper {
    position:relative;
    display:block;
    float:left;
    font-family: 'VolvoNovumLight';
    color:black;
    font-size: 16px;
    line-height:21px;
    padding: 0;
    /*background-color:red;*/
    border-radius:15px;
    width:100%;
    height:200px;
    margin: 35px 0 35px 0;
}

/*------COPYRIGHT------*/
.copyrightwrapper {
    position:relative;
    display:block;
    float:left;
    font-family: 'VolvoNovumLight';
    color:#616161;
    font-size: 13px;
    line-height:16px;
    padding: 15px 35px 35px 35px;
    /*background-color:yellow;*/
    border-radius:15px;
    width:100%;
    height:50px;
    margin: 15px 0 35px 0;
    text-align:center;
}


.clear {clear:both}
.bezet {color:red}
.aantal_input {width:50px}

#mail_error {
    color: red;
    border: 1px solid red;
    padding: 4px;
    display: none;
    width: 50%;
    margin: 15px 0 15px 0;
}

#error {
    display:none;
    position: relative;
    float: left;
    color:red;
    border:1px solid red;
    padding:4px;
}

/*-----------MOBILE VERSIE--------*/
@media only screen and (max-width: 600px) {

.maincontainer {
    display:block;
    margin: 0 auto;
    max-width: 1000px;
    /*background-color:red;*/
    height:auto;
    width: 90%;
}    
    
.maintext {
    position: relative;
    display: block;
    float: left;
    font-family: 'VolvoNovumLight';
    color: black;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    padding: 10% 5% 0 5%;
}    
    
.location {
    position: relative;
    float: left;
    width: 100%;
    border-right: 0px solid grey;
    margin-right: 15px;
    min-height: 100px;
    font-size: 15px;
    line-height: 21px;
    padding: 0 0 0 25px;
    margin-bottom: 15px;
    margin-top: 15px;
}    
    
.days {
    position: relative;
    float: left;
    width: 100%;
    border-right: 0px solid grey;
    margin-right: 15px;
    min-height: 100px;
    font-size: 15px;
    line-height: 21px;
    padding: 0 0 0 25px;
    margin-bottom: 15px;
}    
    
.slots {
    position: relative;
    float: left;
    width: 100%;
    border-right: 0px solid grey;
    margin-right: 15px;
    min-height: 100px;
    font-size: 15px;
    line-height: 21px;
    padding: 0 0 0 25px;
}    
    
    .slot_row {
        display: block;
    }

    .slot_row > td {
        display: block;
        width: 100% !important;
    }

    .aantal_container {
        float: none !important;
        width: 100% !important;
        margin-top: 10px;
        margin-bottom:10px;
    }    
    
.form-input input {
    width: 100%;
    padding: 5px 5px 5px 5px;
}   
    
.form-consent_text {
    font-size: 12px;
    line-height: 1.5;
    padding: 0 0 0 0;
}    
    
.submitbutton {
    background-color: #284E80;
    color: white;
    border: none;
    padding: 10px 40px;
    font-size: 16px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'VolvoNovumMedium ';
    float: left;
    margin-top: 15px;
}    
    
.maintextbevestiging {
    position: relative;
    display: block;
    float: left;
    font-family: 'VolvoNovumLight';
    color: black;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    padding: 3% 5% 0 5%;
    width: 100%;
}    
    
#mail_error {
    color: red;
    border: 1px solid red;
    padding: 4px;
    display: none;
    width: 100%;
    margin: 15px 0 15px 0;
}    
    
}