* {
  margin: 0 auto;
  font-family: sans-serif;
  border-radius: 15px;
}

.content {
  width: 95%;
  margin: 25px auto;
  padding: 20px;
  display: block;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Header */

/* Navigatiebalk */
nav {
  display: flex;
  position: sticky;
  justify-content: space-evenly;
  align-items: center;
  background-color: #f0f0f0;
  padding: 10px;
  gap: 20px;
  width: 96%;
  font-size: 1.2em;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.navigatiebalk {
  color: black;
  text-decoration: none;
  font-weight: bold;
}

.navigatiebalk:hover {
  color: #db6e00;
}

/* Dropdown knop (sporten ▼) */
.dropbtn {
  display: block;
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  background-color: hsl(0, 0%, 100%);
}

/* Dropdown container */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Verborgen submenu */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

/* Submenu */
.dropdown-content a {
  color: black;
  padding: 16px 16px;
  text-decoration: none;
  display: block;
}

/* Hover-effecten */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdownA:hover {
  color: white;
  background-color: #db6e00;
}

#inlogNav {
  border-radius: 12px;
  border: none;
  background-color: #db6e00;
  padding: 20px 20px;
  color: white;
}

/* Main index */

/* Hero afbeelding */
#heroafbeelding {
  width: 100%;
  height: auto;
  text-align: center;
  margin-bottom: 20px;
}

#welkom_tekst {
  margin-top: -100px;
  max-width: 650px; 
  line-height: 1.5;
  color: #333;
}

/* Video */
#video {
  text-align: center;
  width: 35em;
  height: 15em;

}

/* Main Contact */
#contactMain {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Contactsectie in twee kolommen */
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

/* plaatjesgedeelte */
#telefoonAfbeelding,
#kaartAfbeelding {
  margin: 5px;
  width: 245px;
  height: auto;
  margin-bottom: 100px;
  transition: transform 1s ease, filter 1s ease;
}

#telefoonAfbeelding:hover,
#kaartAfbeelding:hover {
  transform: scale(1.05);
  filter: blur(1px) brightness(0.5);
} /* Afbeelding wordt groter en donkerder bij hover */

#telefoonAfbeelding {
  filter: brightness(0.9);
}

#telNummer,
#adresTekst {
  /* tekst in plaatje */
  display: none;
  position: absolute;
  top: 32.5%;                /* midden van de container */
  left: 50%;               /* midden van de container */
  transform: translate(-50%, -50%); /* corrigeert zodat tekst echt gecentreerd is */
  color: white;
  font-size: 1.2rem;
  pointer-events: none;
}

.telefoon-container {
  position: relative; /* maakt dit de referentie voor absolute children */
  display: inline-block; /* zodat het netjes om de afbeelding heen valt */
}

.adres-container {
  position: relative;
  display: inline-block;
}

/* Contact gedeelte */

#contactTitle {
  margin-bottom: 20px;
}

.contactLabel {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  text-align: center;
}

#nameInput,
#emailInput,
#messageInput,
#onderwerpInput {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 4px;
}

#contactSubmit {
  padding: 10px 20px;
  background-color: #002147;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* Feedback gedeelte */

#FeedbackLabel {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 4px;
}

.SubmitButton {
  padding: 10px 20px;
  background-color: #002147;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.star-rating {
  direction: ltr;
  font-size: 2rem;
  unicode-bidi: bidi-override;
  display: inline-block;
}

.star {
  cursor: pointer;
  color: lightgray;
}

.star.selected,
.star:hover {
  color: #F28C28;
}

.star-rating {
  margin-top: 20px;
  text-align: center;
  display: block;
  margin: 0 auto;
}

#feedbackContent {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  display: block;
  text-align: center;
  background-color: #673e3e;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#feedbackInput {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-sizing: border-box;
}

#feedbackSubmit {
  padding: 10px 20px;
  background-color: #0077C8;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* Main login */

#loginTitle {
  margin-bottom: 20px;
}

#lUsernameLabel {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#loginUsername {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 4px;
}

#lPasswordLabel {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

#loginPassword {
  display: block;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 4px;
}

#loginSubmit {
  padding: 10px 20px;
  background-color: #F28C28;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#statusMessage {
  /* Standaard verborgen staat: onzichtbaar en neemt geen ruimte in */
  font-size: 1.3em;
  opacity: 0;
  height: 0;
  margin-top: 10px;
  color: #F28C28;
  font-weight: bold;
  
  /* BELANGRIJK: Definieer de overgang voor ZOWEL opacity als height. */
  /* Dit regelt zowel de fade-in (naar .show) als de fade-out (terug naar hier) */
  transition: opacity 0.5s ease-out, height 0.5s ease-out; 
}

/* Klasse die we met JavaScript toevoegen om te tonen */
#statusMessage.show {
  /* Zichtbaar en neemt ruimte in */
  opacity: 1;
  height: auto; 
  /* De 'transition' eigenschap hierboven zorgt voor de animatie van 0 naar 1 */
}

/* De .hide klasse is nu niet meer nodig, omdat we terugvallen op de 
   standaardstijl (#statusMessage) wanneer we .show verwijderen. */



/* Main registreren */
#rTitle {
  margin-bottom: 20px;
  font-weight: bold;
}

#rUsernameDiv,
#rEmailDiv,
#rPasswordDiv,
#rPasswordConfirmDiv {
  margin-bottom: 20px;
  font-weight: bold;
  text-align: left;
  display: block;
}

/* De inputs van registreren */
.rInput {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  box-sizing: border-box;
}

/* De button voor het registreren */
#rSubmit {
  padding: 10px 20px;
  background-color: #F28C28;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#gebruikersvoorwaardenBtn{
  color: #0077C8;
  text-decoration: underline;
  cursor: pointer;
}

#voorwaardenContainer{
  max-width: 600px;
  max-height: 400px;
  overflow-y: scroll;
  display: none;
  text-align: left;
  position: absolute;
  top: 30%;
  left: 50%;
  align-self: center;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border: 1px solid hsl(0, 0%, 80%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.closeVoorwaardenBtn{
  margin-top: 20px;
  padding: 8px 12px;
  background-color: #F28C28;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
}

/* Main shop*/
#filter-container {
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f0f0f0;
  text-align: center;
}

#apply-filters {
  margin-top: 10px;
  padding: 8px 12px;
  background-color: #F28C28;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

#categorie {
  cursor: pointer;
}

#prijsbereik,
#categorie {
  padding: 5px;
  border-radius: 5px;
}

.optiesCategorie {
  accent-color: #F28C28;
}

.optiesCategorie:checked {
    color: #F28C28;
}

#min-prijs,
#max-prijs {
  Border: 0.5px solid rgb(98, 98, 98);
  padding: 2px 5px;
  border-radius: 5px;
}

/* Container voor elk product */
.product-container {
  /* Afbeelding en tekst bovenaan uitlijnen */
  display: flex;
  align-items: flex-start;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  background-color: #f9f9f9;
  cursor: pointer;
  color: black;
  /* Animatie bij hover */
  transition: transform 0.2s;
}

.productenLink{
  text-decoration: none;
}

.product-container:hover {
  transform: scale(1.02);
  background-color: #fff;
}

/* Afbeelding van het product in shop.html */
.productimg {
  width: 200px;
  height: 200px;
  /* Zorgt dat de afbeelding netjes op de container zit */
  object-fit: cover;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

}

/* Afbeelding van het product in shopProducten */
.productImage{
  width: 300px;
}

/* Tekstblok naast de afbeelding */
.product-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 350px;
}

.product-tekst h3 {
  margin-top: 10px;
  font-size: 1.2rem;
}

/* Main evenementen */
.evenementen-container {
  max-width: 800px;
}

.evenementen-container h2 {
  margin-bottom: 15px;
}

.evenementen-tabel {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin: auto;
}

.evenementen-tabel th,
.evenementen-tabel td {
  padding: 12px;
  text-align: left;
  border-radius: 0;
}

.evenementen-tabel th {
  background-color: #F28C28;
  color: white;
}

.evenementen-tabel tbody tr:nth-child(even) {
  /* Gestreepte rijen */
  background-color: hsl(0, 0%, 95%);
}

.evenementen-tabel tbody tr:nth-child(odd) {
  /* Gestreepte rijen */
  background-color: hsl(0, 0%, 85%);
}

#linksbovenThead {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#rechtsbovenThead {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#linksbovenTbody {
  border-top-left-radius: 10px;
}

#rechtsbovenTbody {
  border-top-right-radius: 10px;
}

#linksonderTbody {
  border-bottom-left-radius: 10px;
}

#rechtsonderTbody {
  border-bottom-right-radius: 10px;
}

/* Main quiz */

#volgendeVraagBtn {
  display: none;
}

#vraag1,
#vraag2,
#vraag3,
#vraag4,
#vraag5,
#vraag6,
#vraag7,
#resultaatBtn {
  display: none;
  margin-top: 20px;
} /* Standaard zijn quizvragen verborgen, worden via JS getoond */

#volgendeVraagBtn,
#resultaatBtn,
#testOpnieuw,
#startQuizBtn {
  padding: 10px 20px;
  background-color: #F28C28;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  display: none;
}

#startQuizBtn {
  display: block;
  margin: 20px auto;
}


.meter {
  width: 300px;
  height: 25px;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
  display: none;
  margin: 10px auto;
}

/* Kleur van meter afhankelijk van klasse (groen/oranje/rood) */
meter.green::-webkit-meter-optimum-value {
  background: #4caf50;
}

meter.orange::-webkit-meter-optimum-value {
  background: #ff9800;
}

meter.red::-webkit-meter-optimum-value {
  background: #f44336;
}

/* Speciale code voor firefox (vanwege dat firefox niet webkit gebaseerd is) */
meter.green::-moz-meter-bar {
  background: #4caf50;
}

meter.orange::-moz-meter-bar {
  background: #ff9800;
}

meter.red::-moz-meter-bar {
  background: #f44336;
}

/* Main sporten */
#sportenMain {
  display: flex;
  flex-direction: column;
  /* onder elkaar */
  gap: 20px;
  /* ruimte tussen blokken */
  align-items: center;
  /* centreren */
}

.sport {
  position: relative;
  width: 300px;
  overflow: hidden;
  object-fit: cover;
}

.sport img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* overlay standaard verborgen */
.overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 10px;
  font-size: 1em;
  opacity: 0;
  transition: opacity 0.4s;
}

/* reset standaard marges binnen de overlay, voor nette uitlijning */
.overlay h1,
.overlay h2,
.overlay h3,
.overlay p {
  margin: 0 0 8px;
}

/* bij hover verschijnt overlay */
.sport:hover .overlay {
  opacity: 1;
}

/* Footer */
footer {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  bottom: 0;
  color: white;
  background-color: hsl(0, 0%, 70%);
}

.sponsors{
  width: 75px;
  height: auto;
}

.Onzewaarden, .Onzeactiviteiten {
  margin-top: 50px;
  margin-left: 200px;
  margin-right: 200px;
}

.tekst_afbeelding {
  background: #f9f9f9;          /* zachte achtergrondkleur */
  border-radius: 8px;           /* afgeronde hoeken */
  padding: 30px;                /* ruimte binnen het blok */
  max-width: 700px;             /* breedte beperken */
  margin: 40px auto;            /* centreren op de pagina */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* subtiele schaduw */
}

.waarden_tekst h2 {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #013d65;               /* sportieve blauwe kleur */
}

.waarden_tekst p {
  margin-bottom: 20px;
  line-height: 1.5;
  color: #333;
}

.waarden_tekst a {
  color: #013d65;
  text-decoration: none;
  font-weight: 600;
}

.waarden_tekst a:hover {
  text-decoration: underline;
}

#Vraag1,
#Vraag2,
#Vraag3,
#Vraag4,
#Vraag5,
#Vraag6,
#Vraag7 {
  background: #f9f9f9;          /* zachte achtergrondkleur */
  border-radius: 8px;           /* afgeronde hoeken */
  padding: 30px;                /* ruimte binnen het blok */
  max-width: 700px;             /* breedte beperken */
  margin: 40px auto;            /* centreren op de pagina */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* subtiele schaduw */
}

.producten {
  padding-top: 50px;
  display: flex;
  flex-direction: column;   /* zet alles onder elkaar */
  justify-content: center;  /* verticale centrering */
  align-items: center;      /* horizontale centrering */
  min-height: 100vh;        /* neemt hele schermhoogte */
  text-align: center;       /* centreert tekst */
  width: 500px;
  padding-bottom: 50px;
}

.producten img {
  width: 500px;
}

#Padel,
#Tennis,
#Voetbal {
  max-width: 650px;       /* breedte van de kolom */
  margin: 0 auto;         /* centreert de kolom horizontaal */
  padding: 20px;          /* ruimte binnen de kolom */
  line-height: 1.5;       /* prettige regelafstand */
  text-align: center;     /* tekst centreren binnen de kolom */
}

#list {
  max-width: 450px;
  padding-left: 120px;
  padding-right: 120px;
  line-height: 1.5;
}

#maillink {
  text-decoration: none;
  color: white;
}