/* ===== Huisstijl kleuren (links nooit blauw) ===== */
a, a:visited { color:#5a4a42 !important; text-decoration:none !important; }
a:hover, a:focus { color:#b57f6e !important; background:#f1e6e3 !important; text-decoration:none !important; }

/* ===== Header / navigatie ===== */
.site-header .nav a{
  color:#5a4a42 !important; text-decoration:none !important;
  border-radius:8px;
}
.site-header nav.dropmenu .menu{
  display:flex; flex-direction:row; align-items:center; gap:16px;
  margin:0; padding:0; list-style:none;
}
.site-header nav.dropmenu .menu > li{ display:inline-flex; margin:0; padding:0; }
.site-header nav.dropmenu .menu > li > a{
  display:inline-block; padding:8px 14px; line-height:1.3; white-space:nowrap;
  font-size:15px; font-weight:400; border-radius:8px;
}
.site-header .nav a:hover{ color:#b57f6e !important; background:#f1e6e3 !important; }
.site-header .nav a.active{
  color:#b57f6e !important; text-decoration:underline !important; text-underline-offset:4px !important;
}

/* Mobiel menu */
@media (max-width: 960px){
  .site-header nav.dropmenu .menu{ flex-direction:column; gap:0; }
  .site-header nav.dropmenu .menu > li > a{ width:100%; padding:12px 0; border-bottom:1px solid #ebe7e5; }
  .site-header nav.dropmenu .menu > li:last-child > a{ border-bottom:0; }
}

/* ===== HERO (foto als achtergrond + betere leesbaarheid) ===== */
.hero{
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('/user/themes/beautyfarm/images/card_back.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff;
}
.hero h1{ color:#fff; }
.hero p{ color:#f6f2f0; }
.hero .btn.btn-ghost{
  background:transparent; border:1px solid #f1e6e3; color:#fff !important;
}
.hero .btn.btn-ghost:hover{
  background:#f1e6e3; color:#5a4a42 !important;
}

/* ===== Kaartjes “Onze behandelingen” – ronder ===== */
.section .grid .card{
  border-radius:16px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  border:1px solid #eee;
}

/* ===== Formulieren (afspraak-maken) consistent ===== */
.afspraak-container{
  max-width: 640px; margin: 2.5rem auto; background:#fdf8f5;
  padding: 2rem; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.afspraak-container h2{ color:#b57f6e; text-align:center; margin-bottom:1.25rem; }
.afspraak-container label{
  color:#5a4a42; font-weight:600; font-size:.95rem; margin-top:1rem; display:block;
}
.afspraak-container input, .afspraak-container select{
  width:100%; padding:.75rem; border:1px solid #e0d2cd; border-radius:10px;
  background:#fafafa; font-size:1rem;
}
.afspraak-container input:focus, .afspraak-container select:focus{
  border-color:#b57f6e; outline:none; background:#fff;
}
.tijdsloten{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.75rem; }
.tijdslot-button{
  display:inline-block; padding:9px 14px; border:1px solid #ebe7e5; border-radius:999px;
  background:#f8f6f5; color:#4a3d36; font-size:15px; font-weight:500; cursor:pointer;
}
.tijdslot-button.selected{ background:#b57f6e; color:#fff; border-color:#b57f6e; }
.inline-error{ color:#9e2f2f; margin-top:6px; font-weight:600; text-align:center; }

/* Submit-knop */
.afspraak-container button[type="submit"]{
  margin-top:1.25rem; width:100%; padding:1rem; border:0; border-radius:10px;
  background:#b57f6e; color:#fff; font-size:1.05rem; font-weight:700; cursor:pointer;
}
.afspraak-container button[type="submit"]:hover{ background:#a26f60; }

/* ===== Footer altijd onderaan (geen wit eronder) ===== */
html, body, #page-wrapper{ height:100%; }
#page-wrapper{ display:flex; flex-direction:column; }
.site-footer{ margin-top:auto; }
/* === Footer (custom) === */
.site-footer{
  background:#faf7f5;
  color:#5a4a42;
  border-top:1px solid #ede7e4;
  padding:28px 0 18px;
}
.site-footer a{ color:#5a4a42 !important; text-decoration:none !important; }
.site-footer a:hover{ color:#b57f6e !important; text-decoration:underline !important; text-underline-offset:3px; }
.footer-grid{
  display:grid; gap:18px; grid-template-columns: repeat(4, minmax(0,1fr));
}
.site-footer .legal{
  margin-top:14px; text-align:center; font-size:.9rem; color:#7a665d;
  border-top:1px solid #ede7e4; padding-top:10px;
}
/* responsive */
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer-grid{ grid-template-columns: 1fr; }
}
/* altijd onderaan */
html, body, #page-wrapper{ height:100%; }
#page-wrapper{ display:flex; flex-direction:column; }
.site-footer{ margin-top:auto; }
/* --- Sticky footer, ongeacht Quark markup --- */
html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

/* hoofdcontainer oprekken */
#page-wrapper { display: flex; flex-direction: column; flex: 1 0 auto; }

/* verschillende mogelijke content-wrappers oprekken */
main, #content, .content, .main-content, .content-wrapper, .container-content {
  flex: 1 0 auto;
}

/* footer altijd onderaan */
.site-footer { margin-top: auto !important; }
/* === Sticky footer correct zonder overlap === */
html, body { min-height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }

#page-wrapper { display: flex; flex-direction: column; flex: 1 0 auto; }

/* Alleen de hoofdcontent rekt; footer schuift vanzelf naar onder */
main, #content { flex: 1 0 auto; display: block; }

/* Footer mag nooit over content heen vallen */
.site-footer {
  position: relative;
  margin-top: 0 !important; /* we leunen op flex i.p.v. auto-margin */
  clear: both;              /* breek uit eventuele floats */
  z-index: 0;
}

/* Zorg dat secties erbóven niet onder de footer doorlopen */
.section { position: relative; z-index: 1; }
.section:last-of-type { margin-bottom: 2rem; } /* beetje lucht boven footer */
/* === RESET overlappende footer/secties === */
.section { position: static !important; z-index: auto !important; }
.site-footer { position: static !important; z-index: auto !important; clear: both !important; }

/* === Eenvoudige, robuuste sticky footer zonder overlap === */
html, body { height: 100%; }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; }
#page-wrapper { flex: 1 0 auto; display: flex; flex-direction: column; }
main, #content { flex: 1 0 auto; display: block; }

/* Extra: zorg dat de laatste sectie niet in de footer schuift */
.section:last-of-type { margin-bottom: 24px !important; }
/* ======= HARD RESET: geen overlap, geen zweven ======= */
html, body { height: auto !important; min-height: 100% !important; }
body { margin: 0 !important; display: block !important; }

/* Hoofdwrappers als flex-kolom met volle hoogte */
#page-wrapper {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* De hoofdcontent rekt; footer duwt naar onder */
main#content, main, #content {
  flex: 1 0 auto !important;
  display: block !important;
}

/* Footer: nooit positioneren, altijd onderaan, niet overlappen */
.site-footer {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin-top: auto !important;
  clear: both !important;
  z-index: 0 !important;
}

/* Secties mogen niet bovenop de footer tekenen */
.section {
  position: static !important;
  z-index: 0 !important;
}

/* Extra speelruimte boven de footer, zodat hij niet 'plakt' tegen laatste sectie */
.section:last-of-type { margin-bottom: 24px !important; }
/* === Afsprakenformulier binnen huisstijl === */
.afspraak-container {
  max-width: 600px;
  margin: 3rem auto;
  background: #fdf8f5;
  padding: 2.5rem;
  border-radius: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.afspraak-container h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.7rem;
  color: #b57f6e;
}

.afspraak-container label {
  display: block;
  margin-top: 1rem;
  color: #5a4a42;
  font-weight: 600;
  font-size: 0.95rem;
}

.afspraak-container input,
.afspraak-container select {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.4rem;
  border: 1px solid #e0d2cd;
  border-radius: 10px;
  background: #fafafa;
  font-size: 1rem;
  transition: border 0.2s;
}

.afspraak-container input:focus,
.afspraak-container select:focus {
  border-color: #b57f6e;
  outline: none;
  background-color: #fff;
}

.tijdsloten {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 1rem;
}

.tijdslot-button {
  flex: 1 1 45%;
  padding: 0.8rem;
  text-align: center;
  background-color: #f1e9e4;
  border: 2px solid #d7b9a8;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: 0.3s;
}

.tijdslot-button.selected {
  background-color: #b57f6e;
  color: #fff;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 0.6rem;
  accent-color: #b57f6e;
  cursor: pointer;
}

.checkbox-wrapper a {
  color: #b57f6e;
  text-decoration: none;
}

.afspraak-container button[type="submit"] {
  margin-top: 2rem;
  width: 100%;
  padding: 1rem;
  background-color: #b57f6e;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.afspraak-container button[type="submit"]:hover {
  background-color: #a26f60;
}

.foutmelding {
  background: #ffe5e5;
  color: #b31b1b;
  border: 1px solid #b31b1b;
  border-radius: 8px;
  padding: 0.9rem;
  margin-top: 1.5rem;
  font-weight: bold;
  font-size: 0.95rem;
}
/* ==== A F S P R A A K - M A K E N  —  H U I S S T Y L E  O V E R R I D E S ==== */

/* Basis typografie gelijk aan site (geen extra vet) */
.afspraak-container {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:#4a3d36;
  max-width: 620px;
  margin: 3rem auto;
  background:#fdf8f5;
  padding: 2.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

.afspraak-container h2{
  color:#b57f6e;
  font-weight:600;        /* geen ultra-vet */
  font-size:1.6rem;       /* gelijk aan home-gevoel */
  letter-spacing:.2px;
  text-align:center;
  margin-bottom:1.25rem;
}

.afspraak-container label{
  display:block;
  margin-top: .9rem;
  color:#5a4a42;
  font-weight:500;        /* minder zwaar dan eerst */
  font-size:.95rem;
}

/* Inputs / selects consistent & rustig */
.afspraak-container input,
.afspraak-container select{
  width:100%;
  padding:.75rem .9rem;
  margin-top:.4rem;
  border:1px solid #e5d9d3;
  border-radius:10px;
  background:#fafafa;
  color:#4a3d36;
  font-size:16px;         /* nette leesmaat, iOS zoom fix */
  line-height:1.25;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}

.afspraak-container input::placeholder{ color:#9b8e88; }

.afspraak-container input:focus,
.afspraak-container select:focus{
  outline:none;
  border-color:#b57f6e;
  box-shadow:0 0 0 3px rgba(181,127,110,.18);
  background:#fff;
}

/* Tijdsloten in “pill” stijl, niet te vet */
.tijdsloten{ display:flex; flex-wrap:wrap; gap:10px; margin-top:.75rem; }
.tijdslot-button{
  display:inline-block;
  padding:.55rem .95rem;
  border:1px solid #e9dfda;
  border-radius:999px;
  background:#f8f6f5;
  color:#4a3d36;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, transform .05s;
}
.tijdslot-button:hover{ transform: translateY(-1px); }
.tijdslot-button.selected{
  background:#b57f6e;
  color:#fff;
  border-color:#b57f6e;
}

/* Checkbox & linkjes */
.checkbox-wrapper{ display:flex; align-items:center; gap:.6rem; margin-top:1.1rem; font-size:.95rem; }
.checkbox-wrapper input[type="checkbox"]{ width:18px; height:18px; accent-color:#b57f6e; }
.checkbox-wrapper a{ color:#b57f6e !important; text-decoration:none !important; }
.checkbox-wrapper a:hover{ text-decoration:underline !important; text-underline-offset:3px; }

/* Submit-knop conform buttons op home */
.afspraak-container button[type="submit"]{
  display:inline-block;
  width:100%;
  margin-top:1.25rem;
  padding:.95rem 1.2rem;
  border:0;
  border-radius:999px;     /* pill zoals de rest */
  background:#b57f6e;
  color:#fff;
  font-size:1.05rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, transform .05s;
}
.afspraak-container button[type="submit"]:hover{ background:#a26f60; transform: translateY(-1px); }

/* Foutmelding subtieler */
.foutmelding{
  background:#fff1f1;
  color:#9e2f2f;
  border:1px solid #f1c7c7;
  border-radius:8px;
  padding:.85rem;
  margin-top:1rem;
  font-weight:600;
  font-size:.95rem;
  text-align:center;
}

/* Flatpickr in huisstijl */
.flatpickr-calendar{
  font-family: inherit;
  border:1px solid #e9dfda;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays{ color:#5a4a42; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover{
  background:#b57f6e !important;
  border-color:#b57f6e !important;
  color:#fff !important;
}
.flatpickr-day:hover{ background:#f1e6e3; }

/* Mobiel spacing netjes */
@media (max-width: 640px){
  .afspraak-container{ margin:2rem 1rem; padding:1.5rem; }
  .tijdslot-button{ flex:1 1 calc(50% - 10px); text-align:center; }
}
/* ==== Afsprakenformulier update ==== */

.afspraak-container {
  background: #ffffff !important;   /* WIT formulier */
  font-size: 0.9rem !important;     /* Kleinere tekst */
  color: #4a3d36;
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  max-width: 620px;
  margin: 3rem auto;
}

/* Titel iets subtieler */
.afspraak-container h2 {
  color: #b57f6e;
  font-weight: 600;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Labels en inputs kleiner & lichter */
.afspraak-container label {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #5a4a42;
  font-weight: 500;
}

.afspraak-container input,
.afspraak-container select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-top: 0.3rem;
  border: 1px solid #e0d6d1;
  border-radius: 10px;
  background: #fff;
  font-size: 0.9rem;
  color: #4a3d36;
  transition: border-color .2s, box-shadow .2s;
}

.afspraak-container input:focus,
.afspraak-container select:focus {
  border-color: #b57f6e;
  box-shadow: 0 0 0 3px rgba(181,127,110,.15);
  outline: none;
}

/* Tijdslot knoppen kleiner */
.tijdslot-button {
  font-size: 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: #f7f7f7;
  border: 1px solid #e5d9d3;
  color: #4a3d36;
  cursor: pointer;
  transition: all .2s;
}
.tijdslot-button:hover {
  background: #f1e6e3;
}
.tijdslot-button.selected {
  background: #b57f6e;
  color: #fff;
  border-color: #b57f6e;
}

/* Checkbox en knop netjes uitgelijnd */
.checkbox-wrapper {
  margin-top: 1rem;
  font-size: 0.85rem;
}
.checkbox-wrapper input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #b57f6e;
}

.afspraak-container button[type="submit"] {
  display: inline-block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 999px;
  background: #b57f6e;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .05s;
}
.afspraak-container button[type="submit"]:hover {
  background: #a26f60;
}

/* Flatpickr in stijl */
.flatpickr-calendar {
  font-size: 0.9rem;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #b57f6e !important;
  color: #fff !important;
  border-color: #b57f6e !important;
}
/* ===== Afspraak-pagina in homepage stijl ===== */

/* Sub-hero zelfde beeld/overlay als home */
.hero--sub.page-appointment-hero{
  background-image:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url('/user/themes/beautyfarm/images/card_back.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 64px 0;
}
.hero--sub .hero-inner{ display:flex; align-items:center; min-height: 36vh; }
.hero--sub .hero-copy h1{ color:#fff; font-weight:700; font-size:2rem; margin:0 0 .4rem 0; }
.hero--sub .hero-copy p{ color:#f6f2f0; font-size:1rem; margin:0; }

/* Lichtgekleurde sectie (zoals home) */
.section--light{ background:#fff; padding: 48px 0; }

/* Form container (wit en subtiel) – we hadden dit al, nog wat spacing/tweaks */
.afspraak-container{
  background:#fff !important;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  padding: 24px 26px;
  max-width: 760px;
  margin: 0 auto;
}

/* Twee kolommen bij brede schermen voor nette flow */
.afspraak-container .form-row{
  display:grid; grid-template-columns: 1fr; gap:16px;
}
@media (min-width: 800px){
  .afspraak-container .form-row{ grid-template-columns: 1fr 1fr; }
}

/* Knop in lijn met home knoppen (pill) */
.afspraak-container .btn.btn-primary{
  border-radius:999px;
}

/* Tijdslot-knoppen in grid voor strakke uitlijning */
#tijdsloten-container{
  display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start;
}
@media (min-width: 800px){
  #tijdsloten-container{ justify-content:flex-start; }
}