/* ===== Imports & Basis ===== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Poppins:wght@400;600;700&display=swap');

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.7;
  color: #555;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .fw-semibold {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: #333;
}

a {
  color: #a77f7f; /* Voorbeeld vrouwelijke accentkleur */
  transition: color 0.3s ease;
}

a:hover {
  color: #8a6868; /* Donkerdere variant van accentkleur */
}

/* ===== Top Bar ===== */
.topbar {
  font-size: 0.8rem;
  background-color: #f8f9fa !important; /* Zorgt voor lichtgrijs */
}
.topbar a {
  color: #6c757d; /* Standaard secundaire tekstkleur */
  transition: color 0.3s ease;
}
.topbar a:hover {
  color: #333;
}

/* ===== Navbar ===== */
.navbar {
  transition: padding 0.3s ease;
  padding-top: 0.5rem; /* Iets meer ruimte boven/onder */
  padding-bottom: 0.5rem;
}

.navbar .navbar-brand img {
  /* Bepaal hier de gewenste breedte, hoogte schaalt mee */
  width: 180px; /* Bijvoorbeeld 180px breed. Pas aan naar wens! */
  height: auto; /* Belangrijk voor proporties */
  max-height: none; /* Verwijder hoogtebeperking */
  transition: width 0.3s ease; /* Optioneel: animatie bij scroll */
}

/* Optioneel: Logo iets kleiner maken bij scroll */
.navbar-scrolled .navbar-brand img {
   width: 150px; /* Iets kleiner */
}

/* Styling voor de menu links */
.navbar .nav-link {
  font-weight: 600;
  color: #555;
  margin: 0 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-flex; /* Helpt bij verticale uitlijning met icoon */
  align-items: center; /* Lijn tekst en icoon verticaal uit */
}
/* Stijl voor het dropdown icoontje */
.navbar .nav-link .bi-chevron-down {
  font-size: 0.75em; /* Maak het icoontje iets kleiner dan de tekst */
  vertical-align: middle; /* Extra check voor uitlijning */
  margin-top: 2px; /* Kleine aanpassing voor perfecte uitlijning indien nodig */
}

/* Verwijder het standaard kleur hover effect, we vervangen het */
/* .navbar .nav-link:hover, */
/* .navbar .nav-link.active { */
/*  color: #a77f7f; */ /* Accentkleur */
/* } */

/* Lijn onder link op hover */
.navbar .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; /* Positie van de lijn */
  left: 50%; /* Start in het midden */
  transform: translateX(-50%); /* Centreer de startpositie */
  width: 0; /* Start onzichtbaar */
  height: 2px; /* Dikte van de lijn */
  background-color: #a77f7f; /* Accentkleur */
  transition: width 0.3s ease; /* Animatie voor de breedte */
}

/* Bij hover: maak lijn zichtbaar en verander tekstkleur */
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { /* Ook voor actieve link */
  width: 60%; /* Maak de lijn zichtbaar (bijv. 60% van link breedte) */
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
   color: #333; /* Iets donkerder maken op hover/active */
}


/* Dropdown menu blijft grotendeels hetzelfde */
.navbar .dropdown-menu {
  border: none;
  box-shadow: 0px 3px 15px rgba(0,0,0,0.1);
  font-size: 0.95rem;
  margin-top: 0.5rem; /* Iets meer ruimte onder hoofdlink */
}
.navbar .dropdown-item {
  transition: background-color 0.2s ease, color 0.2s ease;
}
.navbar .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #a77f7f;
}

/* Afspraak knop blijft hetzelfde */
.navbar .btn-outline-dark {
  border-color: #333;
  color: #333;
  border-width: 2px;
  transition: all 0.3s ease;
}
.navbar .btn-outline-dark:hover {
  background-color: #333;
  color: #fff;
}


/* ===== Hero Section ===== */
/* ===== Hero Section ===== */
.hero-section {
  min-height: 80vh;
  /* Voeg de background-image hier toe */
  background-image: url('https://waxenutrecht.nl/afbeeldingen/head.jpg');
  background-size: cover;
  /* Pas de verticale positie aan (bijv. 60% of 70% van boven) */
  background-position: center 60%; /* <-- Aanpassing hier */
  position: relative;
  background-attachment: fixed; /* Parallax effect */
}
.hero-section .overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.45); /* Iets donkerder voor contrast */
}
.hero-section h1 {
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
.hero-section p {
    color: #eee;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
.hero-section .btn-light {
    font-weight: 600;
    padding: 0.8rem 1.8rem;
}

/* ===== USP Blok ===== */
#usp .usp-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#usp .usp-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
#usp .usp-icon {
  font-size: 2.8rem; /* Iets groter */
  color: #a77f7f; /* Accentkleur */
  line-height: 1;
}

/* ===== Newsletter Sectie ===== */
.newsletter {
  background: linear-gradient(to right, #a77f7f, #8a6868); /* Zachte gradient */
  padding: 3rem 0; /* Meer padding */
}
.newsletter h4 {
    color: #fff;
    font-weight: 600;
}
.newsletter p {
    color: #eee;
}
.newsletter .form-control {
    border-radius: 20px 0 0 20px; /* Afgerond links */
}
.newsletter .btn {
    border-radius: 0 20px 20px 0; /* Afgerond rechts */
    font-weight: 600;
}

/* ===== Openingstijden Blok ===== */
#openingstijden .opening-hours-table td {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}
#openingstijden h3 i {
    color: #a77f7f;
}
#openingstijden img {
    max-height: 350px;
    object-fit: cover;
}


/* ===== Behandelingen Blok ===== */
#behandelingen .treatment-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  overflow: hidden; /* Zorgt dat img niet uitsteekt bij hover */
}
#behandelingen .treatment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
#behandelingen .treatment-card img {
  height: 200px; /* Vaste hoogte voor afbeeldingen */
  object-fit: cover; /* Zorgt dat afbeelding mooi schaalt */
  transition: transform 0.4s ease;
}
#behandelingen .treatment-card:hover img {
    transform: scale(1.05); /* Licht inzoomen op hover */
}
#behandelingen .card-body {
    text-align: center;
}
#behandelingen .card-title {
    margin-bottom: 0.5rem;
}
#behandelingen .card-text.small {
    font-size: 0.85rem;
    min-height: 60px; /* Zorgt voor gelijke hoogte beschrijving */
}
#behandelingen .card-text i {
    color: #a77f7f;
}


/* ===== Info/Accordeon Blok ===== */
.info-section {
    background-size: cover;
    background-position: center;
    position: relative;
    background-attachment: fixed; /* Parallax */
}
.info-section .overlay-light {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.8); /* Lichte overlay */
}
.accordion-button {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #a77f7f; /* Accentkleur als open */
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); /* Witte pijl */
}
.accordion-button i {
    color: #8a6868;
    transition: color 0.3s ease;
}
.accordion-button:not(.collapsed) i {
    color: #fff;
}
.accordion-item {
    border: 1px solid #eee;
    margin-bottom: 0.5rem;
    border-radius: 5px;
    overflow: hidden;
}
.accordion-body {
    background-color: #fdfdfd;
}

/* ===== Footer ===== */
footer {
  font-size: 0.9rem;
}
footer h5 {
  color: #fff;
  margin-bottom: 1rem;
}
footer a {
  color: #ccc; /* Lichter grijs voor links */
  text-decoration: none;
  transition: color 0.3s ease, padding-left 0.3s ease;
}
footer a:hover {
  color: #fff;
  padding-left: 5px;
}
footer .social-icons a {
  transition: transform 0.3s ease;
  display: inline-block; /* Nodig voor transform */
}
footer .social-icons a:hover {
  transform: scale(1.1) translateY(-2px);
  padding-left: 0; /* Geen padding verschuiving voor iconen */
}
footer .footer-nav a {
    display: block; /* Zorgt dat hover effect goed werkt */
    margin-bottom: 0.2rem;
}
footer .border-top {
    border-color: #444 !important; /* Iets lichtere border */
}
footer .text-muted, footer .text-muted a {
    color: #888 !important;
}
footer .text-muted a:hover {
    color: #ccc !important;
}


/* ===== Scroll-to-Top Knop ===== */
/* ===== Scroll-to-Top Knop ===== */
.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #333;
  color: white;
  width: 45px;
  height: 45px;
  line-height: 45px; /* Verticaal centreren */
  text-align: center;
  border-radius: 50%;
  z-index: 999;
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background-color 0.3s ease, opacity 0.4s ease, visibility 0.4s ease;
}

.scroll-top:hover {
  background-color: #a77f7f; /* Accentkleur op hover */
  color: white;
}

.scroll-top.active  {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



/* ===== Responsive Aanpassingen (Voorbeeld) ===== */
@media (max-width: 991.98px) {
  .navbar .navbar-nav {
    margin-top: 1rem; /* Ruimte boven menu items op mobiel */
  }
  .navbar .btn-outline-dark {
      margin-top: 0.5rem;
      width: 100%; /* Volle breedte knop op mobiel */
  }
  .hero-section {
      min-height: 60vh;
  }
  .hero-section h1 {
      font-size: 2.5rem;
  }
  .newsletter .col-md-6 {
      width: 80%; /* Iets breder op medium screens */
  }
}

@media (max-width: 767.98px) {
  .hero-section {
      min-height: 50vh;
      background-attachment: scroll; /* Parallax werkt vaak niet goed op mobiel */
  }
   .hero-section h1 {
      font-size: 2rem;
  }
   .hero-section p {
      font-size: 0.9rem;
   }
  .usp-item {
    margin-bottom: 1.5rem;
  }
  .newsletter .col-md-6 {
      width: 100%; /* Volle breedte op klein */
  }
  footer .col-md-4 {
      text-align: center; /* Centreer footer kolommen op mobiel */
  }
  footer .social-icons {
      justify-content: center;
      display: flex;
  }
  footer ul.list-unstyled {
      padding-left: 0; /* Reset padding */
  }
}


/* Definieer je accentkleur (bijv. een zachte terracotta/roze) */
:root {
  --custom-accent-color: #D9AFA4; /* Jouw gekozen kleur */
  --custom-accent-darker: #B88A7E; /* Donkerdere variant voor hover */
}

/* Stijl voor de accentkleur tekst */
.text-custom-accent {
  color: var(--custom-accent-color) !important;
}

/* Stijl voor de accentkleur achtergrond */
.bg-custom-accent {
  background-color: var(--custom-accent-color) !important;
}

/* Stijl voor de accentkleur knoppen */
.btn-custom-accent {
  background-color: var(--custom-accent-color);
  border-color: var(--custom-accent-color);
  color: #fff; /* Witte tekst op de knop */
  /* Voeg eventueel transitie toe */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-custom-accent:hover,
.btn-custom-accent:focus {
  background-color: var(--custom-accent-darker);
  border-color: var(--custom-accent-darker);
  color: #fff;
}

/* Pas eventueel ook de accordion button kleur aan */
.accordion-button:not(.collapsed) {
     background-color: var(--custom-accent-color);
     color: white;
}
 .accordion-button:not(.collapsed)::after {
     /* Zorg dat de pijl ook wit is */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
 }
 .accordion-button:not(.collapsed) i { /* Icoon ook wit maken */
     color: white;
 }

/* Optioneel: Footer link hover kleur */
.footer-link-hover:hover, .social-icon-hover:hover {
    color: var(--custom-accent-color) !important; /* Accentkleur bij hover */
    transition: color 0.2s ease;
}

/* Stijlen voor de dynamische routebeschrijving */
#directionsOutput { /* Nu gericht op de ID van de output div */
  margin-top: 1.5rem;
  padding: 1.5rem;
  background-color: #f8f9fa; /* Lichte achtergrond */
  border-radius: 8px;
  border: 1px solid #eee;
  text-align: left; /* Instructies links uitlijnen */
  opacity: 0; /* Start onzichtbaar */
  max-height: 0; /* Start ingeklapt */
  overflow: hidden; /* Verberg inhoud als ingeklapt */
  transition: opacity 0.5s ease, max-height 0.5s ease, margin-top 0.5s ease, padding 0.5s ease; /* Vloeiende animatie */
}

#directionsOutput.visible { /* Class om zichtbaar te maken */
  opacity: 1; /* Maak zichtbaar */
  max-height: 500px; /* Ruime max-hoogte (pas aan indien nodig) */
  /* Padding en margin-top worden ook geanimeerd door de transition */
}

#locationSelect { /* Styling voor de select dropdown */
  max-width: 400px; /* Beperk de breedte op grotere schermen */
  margin-left: auto;
  margin-right: auto;
}

#directionsOutput h5 { /* Styling voor de titel in de output */
  color: var(--custom-accent-color); /* Gebruik je accentkleur */
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.8rem;
}

#directionsOutput p:last-child {
  margin-bottom: 0; /* Geen extra marge onderaan de instructie */
}

/* Stijl voor Google Maps link (past bij je 'a' stijl) */
#directionsOutput a.btn { /* Specifiek voor de knop */
   font-size: 0.9rem; /* Iets kleiner maken evt. */
}
#directionsOutput a:not(.btn) { /* Voor eventuele links in de tekst */
    font-weight: 600;
    text-decoration: underline;
     /* color: #a77f7f; -- Erft waarschijnlijk al van je globale 'a' stijl */
}

/* ===== Styling voor de Nieuwsbrief Sectie (#nieuwsbrief) ===== */

#nieuwsbrief .newsletter-form .form-control {
  font-family: 'Lato', sans-serif; /* Body font voor input */
  font-size: 0.9rem; /* Iets kleiner eventueel */
  border-color: #e0e0e0; /* Subtiele border kleur */
  box-shadow: none; /* Geen standaard focus shadow */
  transition: border-color 0.3s ease;
}

#nieuwsbrief .newsletter-form .form-control::placeholder {
  color: #999; /* Iets donkerder placeholder */
  font-family: 'Lato', sans-serif;
}

/* Focus stijl met jouw accentkleur */
#nieuwsbrief .newsletter-form .form-control:focus {
  border-color: var(--custom-accent-color);
  /* Optioneel: een subtiele focus shadow in je accentkleur */
  /* Eerst proberen of de variabele bestaat, anders een fallback */
  box-shadow: 0 0 0 0.2rem rgba(var(--custom-accent-rgb, 217, 175, 164), 0.25); /* Pas RGB fallback aan als nodig */
}

/* Knop styling (gebruikt .btn-custom-accent die je al hebt) */
#nieuwsbrief .newsletter-form .btn-custom-accent {
  font-family: 'Poppins', sans-serif; /* Heading font voor knop tekst */
  font-weight: 600;
  font-size: 0.9rem; /* Match input of iets groter */
  /* Zorgt dat de knop hoogte matcht met input */
  line-height: inherit;
  padding-top: 0.375rem; /* Bootstrap's .form-control-sm padding */
  padding-bottom: 0.375rem;
}

/* Styling voor de feedback alerts */
#nieuwsbrief .newsletter-alert {
  font-family: 'Lato', sans-serif;
  font-size: 0.9rem;
  padding: 0.75rem 1rem; /* Iets compacter */
  border-radius: 5px; /* Matcht bv. je accordion afronding */
  border-width: 1px;
  border-style: solid;
  display: inline-flex; /* Zorgt dat het netjes om de tekst sluit */
  align-items: center; /* Lijn tekst en close knop uit */
  max-width: 90%; /* Voorkom dat alert te breed wordt */
}

#nieuwsbrief .newsletter-alert .btn-close {
    padding: 0.5rem; /* Makkelijker klikken */
    margin-left: 1rem;
}


/* Specifieke alert kleuren (optioneel, Bootstrap defaults zijn ok, maar dit past beter) */
#nieuwsbrief .alert-success.newsletter-alert {
  background-color: #e6f5e6; /* Lichter groen */
  border-color: var(--custom-accent-darker); /* Gebruik donkere accent voor border */
  color: #333; /* Donkere tekst voor leesbaarheid */
}
#nieuwsbrief .alert-success.newsletter-alert .btn-close {
    filter: invert(30%) sepia(10%) saturate(500%) hue-rotate(80deg) brightness(80%) contrast(80%); /* Maak close knop donkerder */
}


#nieuwsbrief .alert-warning.newsletter-alert {
  background-color: #fff8e1;
  border-color: #ffeeba;
  color: #856404;
}

#nieuwsbrief .alert-danger.newsletter-alert {
  background-color: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

/* In style-alt.css (controleer/voeg toe) */

:root {
  /* Zorg dat deze variabelen gedefinieerd zijn */
  --custom-accent-color: #a77f7f;
  --custom-accent-darker: #8a6868;
  --custom-accent-rgb: 167, 127, 127;
}

/* Algemene sectie styling voor datumkiezer */
.date-selection-section {
  /* padding-top: 2.5rem; */ /* Kan nu via Bootstrap mb-5 */
  /* padding-bottom: 2.5rem; */
}

/* Kaart styling voor stappen */
.card.shadow-sm {
    transition: box-shadow 0.3s ease-in-out;
}
.card.shadow-sm:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important; /* Subtiele hover */
}

/* Kalender Styling */
.calendar-navigation .btn {
    font-size: 0.9rem;
}
.calendar-navigation h4 {
    color: var(--custom-accent-darker); /* Accentkleur voor maand/jaar */
    font-weight: 700; /* Extra bold */
}

.calendar-table {
    table-layout: fixed;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(var(--custom-accent-rgb), 0.1); /* Schaduw met accentkleur tint */
    background-color: #fff;
}

.calendar-table thead th {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: var(--custom-accent-darker);
    background-color: #f8f9fa;
    padding: 0.8rem 0.5rem;
    border-bottom: 2px solid #eee;
    font-size: 0.9rem; /* Iets kleiner */
}

.calendar-table tbody td {
    padding: 0.3rem;
    height: 65px;
    vertical-align: middle;
    border: 1px solid #f0f0f0;
    position: relative;
}

.calendar-table tbody td:empty {
    background-color: #fdfdfd;
}

.day-number,
.day-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: auto;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border: 1px solid transparent; /* Start zonder border */
}

.day-link {
    color: #555;
    background-color: #fff;
}
.day-link:hover {
    background-color: var(--custom-accent-color);
    color: #fff;
    transform: scale(1.1);
    border-color: var(--custom-accent-darker); /* Border op hover */
}

/* NIEUW of AANGEPAST: Actieve/Geselecteerde dag */
.calendar-table .day-link.active {
    background-color: var(--custom-accent-darker); /* Donkerder voor selectie */
    color: #fff !important; /* Zorg dat tekst wit is */
    font-weight: 700;
    border-color: var(--custom-accent-darker);
    transform: scale(1.1); /* Behoud schaal */
}

.day-number.disabled {
    color: #bbb;
    background-color: #f9f9f9;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid #eee; /* Subtiele border voor disabled */
}

/* Styling voor Tijdslots Sectie */
#stap-3-tijd h2 { /* Verwijst naar de H2 in de tijdslot sectie */
    font-size: 1.6rem;
    color: #333;
    margin-bottom: 1.5rem;
}
.time-slot-grid {
    /* Bootstrap d-flex/gap regelt dit nu */
}

/* Zorg dat btn-outline-custom-accent goed gedefinieerd is */
.btn-outline-custom-accent {
    color: var(--custom-accent-color);
    border-color: var(--custom-accent-color);
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif; /* Consistent font */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
}
.btn-outline-custom-accent:hover {
    background-color: var(--custom-accent-color);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--custom-accent-rgb), 0.2);
}

/* Responsive aanpassingen (controleer of ze nog relevant zijn) */
@media (max-width: 575.98px) {
    .calendar-table {
        font-size: 0.8rem;
    }
    .calendar-table thead th {
        padding: 0.6rem 0.2rem;
    }
    .calendar-table tbody td {
        height: 55px;
        padding: 0.1rem;
    }
    .day-number, .day-link {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    .calendar-navigation .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
     .calendar-navigation h4 {
        font-size: 1.1rem;
    }
    .btn-outline-custom-accent { /* Pas ook button size aan */
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
}


/* Privacy tekst onderaan */
#nieuwsbrief .text-muted {
  font-size: 0.8rem; /* Iets kleiner */
}
/* De lock-icon kleur wordt al gezet door .text-custom-accent in de HTML */
/* #directionsOutput a:not(.btn):hover { */
    /* color: #8a6868; */
/* } */