/*=========================================================================
    # hele site opmaak
========================================================================== */


body {
 counter-reset: section;
 background-color: #eaedf2;
 font-family: "Nunito", sans-serif;
 font-size: 14px;
 margin: 0;
 overflow-y: auto;
 height: 100%;
}



.pagina-container {
 padding: 3vmin 3vmin 80px;
}

.no-nav-padding .pagina-container {
 padding: 3vmin;  /* Padding van 3% van het kleinste schermdimension */
}


select {
 font-size: 15px;
 height: auto;
 max-height: 42px;
}



.PijlTerug {
 position: fixed;
 top: 20px;
 left: 20px;
 font-size: 40px;
 cursor: pointer;
 width: 40px; /* klikgebied is net zo groot als de pijl */
 height: 40px;
}

.PijlTerug a {
 color: #000;
 text-decoration: none;
}

.PijlTerug a:hover {
 color: #333; 
}


/* Profiel foto*/
.ProfielFoto {
 position: fixed;
 top: 20px;
 right: 20px;
 width: 60px;
 height: 60px;
 cursor: pointer;
}

.ProfielFoto img {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 object-fit: cover;
 display: block;
}





/* Navigatie onderaan */

.breadcrumb-counter-nav {
 margin: 0;
 display: flex;
 justify-content: space-around;
 align-items: center;
 width: 100%;
 list-style: none;
 background-color: #bdbdbd;
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 position: fixed;
 bottom: 0;
 left: 0;
 box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
 z-index: 100; /* bepaalt de volgorde van overlapping elementen */
 height: 80px;
}

.breadcrumb-counter-nav-item {
 flex: 1;
 text-align: center;
 cursor: pointer;
 padding: 5px 0;
 font-size: 18px;
 display: flex;
 flex-direction: column;
 align-items: center;
 color: #222;
}

.breadcrumb-counter-nav-item a {
 color: inherit;  /* Neem de tekstkleur over van het ouder-element */
 text-decoration: none;
 font-weight: 600;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.breadcrumb-counter-nav-item .icoon-cirkel {
 background: white;
 border-radius: 50%;
 width: 42px;
 height: 42px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 20px;
 color: #507192;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 transition: background-color 0.3s, color 0.3s; /* Vloeiende overgang */
}

.breadcrumb-counter-nav-item.active .icoon-cirkel{
 background-color: #507192;
 color: white;
 box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}


.breadcrumb-counter-nav-item:hover {
 color: white;
}

.breadcrumb-counter-nav-item:hover .icoon-cirkel {
 background-color: #a8b8c8;
 color: white;
}

/* Responsive design voor navigatie in gegevens en agenda pagina */
@media only screen and (max-width: 600px) {
  .breadcrumb-counter-nav-item {
  font-size: 16px;
 }
}



/*=========================================================================
    Login pagina opmaak
========================================================================== */


.inlog-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 80px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.inlog-form {
 background: #fff;
 padding: 40px;
 border-radius: 20px;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 display: flex;
 flex-direction: column;
 gap: 10px;
 width: 90%;
 max-width: 450px;
 text-align: center;
}

.inlog-form h1 {
 font-size: 60px;
 padding-bottom: 40px;
}

.inlog-form input,
.inlog-form select {
 padding: 11px;
 border-radius: 10px;
 border: 1px solid #ccc;
 width: 100%;
 color: rgb(89, 85, 85);
}



.inlog-form button {
 background-color: #507192;
 color: white;
 padding: 12px;
 font-size: 16px;
 border: none;
 border-radius: 20px;
 cursor: pointer;
}

.inlog-form button:active {
  border-radius: 20px;
}

.doctor-wrapper {
 margin-top: 90px;
 position: relative;
 text-align: center;
}




.spraakwolk {
 font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #222;
 position: absolute;
 top: -100px;
 left: 50%;
 transform: translateX(-50%); /* verplaats het element 50% van zijn eigen breedte naar links */
 background: #ffffff;
 border-radius: 20px;
 padding: 18px 22px;
 width: 280px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 outline: 3px solid #000000;
}

.spraakwolk::after { /* Driehoek van spraakwolkje */
 content: "";
 position: absolute;
 bottom: -20px;
 left: 50%;
 transform: translateX(-50%);
 border-width: 10px;
 border-style: solid;
 border-color: #fff transparent transparent transparent;
}

.doctor-wrapper img {
 width: 220px;
 height: auto;
 padding-bottom: 20px;
 }


/*=========================================================================
    Hoofdpagina (index) opmaak
========================================================================== */
.logo {
 display: block;
 margin: 30px auto 60px;
 width: 200px;
}

.punten-block {
 margin-top: 10px;
 text-align: center;
 
}

.punten-block h2 {
 font-size: 3rem;
 margin-bottom: 10px;
}

.punten-block .punten {
 font-size: 2.5rem;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px;
 margin-bottom: 50px;
}

.punten-block .punten i {
 color: gold;
 font-size: 2.5rem;
}


.panda-container {
 display: flex;
 justify-content: center;
 margin-top: 30px;
 position: relative;
 z-index: 2; /* bepaalt welke laag bovenop ligt als elementen elkaar overlappen */
}

.panda-container img {
 width: 30vw; /* maakt het scherm responsive */
  max-width: 280px; 
  min-width: 240px; 
 height: auto;
 object-fit: cover;
 border-radius: 50%;
 border: 2px solid #ccc;
}


.naam {
 text-align: center;
 font-size: 2rem;
 font-weight: bold;
 margin-top: -10px;
 margin-bottom: 60px;
}

.grijs-blok {
 background-color: #bcbcbc;
 border-top-left-radius: 30px;
 border-top-right-radius: 30px;
 width: 100%;
 margin-top: -140px;   /* overlap de panda */
 padding-top: 150px;
 position: relative;
}





.menu.icons.icon-top {
 display: flex;
 justify-content: center;
 gap: 30px;
 margin-bottom: 20px;
 padding: 0;
}

.menu.icons.icon-top li {
 list-style: none;
}

.menu.icons.icon-top a {
 display: flex;
 flex-direction: column;
 align-items: center;
 color: #000;
 text-decoration: none;
}

.menu.icons.icon-top i {
  background-color: white;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 20px;
}

.menu.icons.icon-top span {
  font-size: 1.3rem;
}

.streak-button {
 display: inline-flex;
 align-items: center;
 background-color: #4c4644;
 color: white;
 border: none;
 padding: 12px 24px;
 font-size: 1.1rem;
 border-radius: 10px;
 cursor: pointer;
 gap: 20px;
 margin: 20px auto 0;
 margin-bottom: 10px;
 display: flex;
 justify-content: center;
}

.streak-button i {
 font-size: 1.8rem;
}

/*=========================================================================
    #Gegevens pagina opmaak
========================================================================== */


.gegevens-header-wrapper {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 60px 0 60px;
}

.gegevens-header {
 margin-top: 100px;
 text-align: left;
}

.gegevens-header h1 {
 font-size: 3rem;
 margin-bottom: 5px;
}

.gegevens-header p {
 font-size: 1.1rem;
 color: #333;
 line-height: 1.4;
}

.profiel-wrapper {
 display: flex;
 align-items: center;
 gap: 20px;
 margin-top: 80px;
} 

.ProfielFoto-gegevens img {
 width: 80px;
 height: 80px;
 border-radius: 50%;
 object-fit: cover;
 right: 30px;
}


.ProfielFoto-naam {
 position: relative;
 top: 10px;
 right: 10px;
 font-size: 1rem;
 font-weight: bold;
 text-align: center;
}




.gegevens-box {
 background-color: #d4cfcf;
 border-radius: 20px;
 padding: 20px;
 margin-top: 40px;
}

.gegevens-item {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 12px 40px;
 color: inherit;
 text-decoration: none;
}

.gegevens-item:hover {
 background-color: #938f8f;
}

.gegevens-item i {
 font-size: 1.2rem;
 margin-right: 10px;
 color: #000000;
 width: 25px;
}

.gegevens-item span {
 font-size: 1.2rem;
 color: #000000;
 flex-grow: 1;
}

.gegevens-item .pijl {
 font-size: 2rem;
 color: #000000;
 flex-grow: 0;
}

.gegevens-box hr {
 border: none;
 border-top: 1px solid #ccc;
 margin: 5px 0;
}


/*=========================================================================
    #Agenda pagina opmaak
========================================================================== */
.agenda-header {
 margin: 30px 0 10px 0;
 text-align: center;
 font-family: "Nunito", sans-serif;
}

.agenda-header h1 {
 font-size: 2.5rem;
 margin: 0;
 font-weight: 700;
}

.agenda-header p {
 font-size: 1.2rem;
 margin: 5px 0 0 0;
 color: #333333;
}



/* Kalender pagina */

.calendar-wrapper {
 display: grid;
 place-items: center;

}

.calendar {
 --side-padding: 20px;
 --border-radius: 34px;
 --accent-br: 15px;
 width: 400px;
}

.calendar select {
 padding: 12px;
 border-radius: 12px;
 border: 1px solid #ccc;
 width: 100%;
}
.calendar__opts {
 background-color: #fff;
 display: grid;
 place-items: center;
 column-gap: 15px;
}
.calendar__opts {
 border-top-left-radius: var(--border-radius); /* Border-radius van de bovenhoeken */
 border-top-right-radius: var(--border-radius);
 padding: 20px var(--side-padding); /* Padding aan bovenkant en zijkanten met variabele */
}
.calendar__body {
 background-image: linear-gradient(to bottom, #f3f4f6, #fff); /* Achtergrond met een kleurverloop */
 padding: 10px var(--side-padding) 20px;
 border-bottom-left-radius: var(--border-radius);
 border-bottom-right-radius: var(--border-radius);
}

.calendar__days {
 background-color: #fff;
 padding: 0 var(--side-padding) 10px;
 display: grid;
 grid-template-columns: repeat(7, 1fr);
}
.calendar__days > div {
 text-align: center;
 font-weight: 700;
 font-size: 1.02rem;
 color: #3a3a3a;
}
.calendar__dates {
 padding: 10px var(--side-padding);
 display: grid;
 grid-template-columns: repeat(7, 1fr);
}
.calendar__date {
 --height: calc(400px / 6 - var(--side-padding)); /* Variabele hoogte gebaseerd op de kalendergrootte */
 text-align: center;
  /* Google uitleg: The calc-size() CSS function allows you to perform calculations on intrinsic size values such as auto,
  fit-content,
  and max-content. */
 height: var(--height);
 line-height: var(--height);
 font-weight: 600;
 font-size: 1.02rem;
 cursor: pointer;
 position: relative;
}

a:focus,
button:focus,
.calendar__date:focus {
 outline: 2px solid #ff374b;
 outline-offset: 2px;
 border-radius: 4px;
}


.calendar__date::before {
 content: "";
 position: absolute;
background-color: #000000; /* fallback in hex (wit) */
 background-color: rgba(255, 255, 255, 0);
 width: 100%;
 height: calc(var(--height) * 0.9);
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 border-radius: var(--accent-br);
 transition: background-color 0.3s ease;
}
.calendar__date:not(.calendar__date--selected):not(.calendar__date--grey):hover::before {
 background-color: #ededed;
}
.calendar__date--grey {
 color: #c5c8ca;
 cursor: not-allowed;
}
.calendar__date--selected {
 color: #ff374b;
}
.calendar__date--selected::before {
 background-color: #ffeaec;
}
.calendar__date--first-date::before {
 border-top-left-radius: var(--accent-br);
 /* Voorbeeld van google:
   Als --accent-br is gedefinieerd als 10px, zal de linkerbovenhoek een radius van 10 pixels hebben. Als --accent-br is gedefinieerd als 50%, zal de linkerbovenhoek een radius van 50% van de breedte/hoogte van het element hebben. */
 border-bottom-left-radius: var(--accent-br);
}

.calendar__date--range-start::after {
 content: "";
 position: absolute;
 bottom: 3px;
 border-radius: 24px;
 left: 50%;
 transform: translateX(-50%);
 /* Dit zegt google: betekent dat een element horizontaal verplaatst wordt met 50% van zijn eigen breedte,
 naar links. Dit is een veelgebruikte techniek om een element horizontaal te centreren binnen een parent element. */
 background-color: #ff374b;
 width: 10px;
 height: 4px;
}

.calendar__date span {
 position: relative;
 z-index: 1;
}

.afsprakenInfo p{
  font-size: 1rem;
}




/* afspraken box */

.afsprakenExtraInfo {
 margin-top: 20px;
 max-width: 600px;
 font-family: sans-serif;
}

.afspraak-blok {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 margin-bottom: 20px;
}

.afspraak-tijd {
 font-weight: bold;
 font-size: 1.1rem;
 min-width: 60px;
 color: #444;
}

.afspraak-box {
 background-color: #f3f3f3;
 padding: 15px 20px;
 border-radius: 12px;
 flex-grow: 1;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.afspraken-dag h2 {
 font-size: 1.8rem;
 padding-bottom: 35px;
}

.afspraak-box h3 {
 margin: 0 0 8px;
 font-size: 1.4rem;
 color: #222;
}

.afspraak-box p {
 margin: 4px 0;
 font-size: 1rem;
}