/* Afsprakenplanner van Core: opmaak van de boekings- en beheerpagina (zie afspraak.js).
   Bron: Claude/afsprakenplanner/web/afspraak.css; staat ook op www.andrepeat.nl en www.resolveit.nl.
   De site zet de kleuren met de --afp-*-variabelen op .afp[data-afspraak] en .afp-overlay; hier staan alleen neutrale
   standaarden, zonder gewicht (:where), zodat die van de site altijd winnen, ook als dit bestand later laadt. */
:where(.afp, .afp-overlay) {
  --afp-accent: #2d2e2b;
  --afp-on-accent: #fff;
  --afp-accent-tekst: var(--afp-accent); /* accentkleur als tekst op de achtergrond (tijden, links) */
  --afp-text: inherit;
  --afp-muted: #6a6c68;
  --afp-card: #fff;
  --afp-line: #e2e2de;
  --afp-hover: rgba(0, 0, 0, 0.04);
  --afp-fout: #b42318;
  --afp-ok: #2f7a3b;
  --afp-radius: 12px;
  --afp-bg: #fff; /* achtergrond van het overlayvenster */
}
.afp {
  color: var(--afp-text);
  max-width: 860px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.55;
}
.afp *, .afp *::before, .afp *::after { box-sizing: border-box; }
.afp p { margin: 0 0 0.75em; }
.afp-titel { margin: 0 0 0.25em; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; color: var(--afp-text); }
.afp-feiten { color: var(--afp-muted); font-size: 0.95rem; }
.afp-beschrijving { margin-top: 1rem; max-width: 640px; }
.afp-kop { padding-bottom: 1.25rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--afp-line); }
.afp-stap { margin: 0 0 1rem; font-size: 1.1rem; color: var(--afp-text); }
.afp-klein { font-size: 0.85rem; color: var(--afp-muted); margin-top: 1rem; }

.afp-melding { padding: 0.75rem 1rem; border-radius: var(--afp-radius); background: var(--afp-hover); margin: 0 0 1rem; }
.afp-melding--fout { color: var(--afp-fout); background: color-mix(in srgb, var(--afp-fout) 10%, transparent); }
.afp-melding--ok { color: var(--afp-ok); background: color-mix(in srgb, var(--afp-ok) 12%, transparent); }

/* tijdkiezer: maandkalender links, tijden van de gekozen dag rechts (op een telefoon eronder) */
.afp-kiezer {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 2rem;
  background: var(--afp-card); border: 1px solid var(--afp-line); border-radius: var(--afp-radius); padding: 1.25rem 1.5rem;
}
.afp-maand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.afp-maand-label { font-weight: 600; flex: 1; text-align: center; }
.afp-pijl {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--afp-line);
  background: transparent; color: var(--afp-text); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.afp-pijl:hover:not(:disabled) { border-color: var(--afp-accent); color: var(--afp-accent-tekst); }
.afp-pijl:disabled { opacity: 0.3; cursor: default; }
.afp-kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px 2px; text-align: center; }
.afp-wd { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--afp-muted); padding: 0.25rem 0 0.4rem; }
.afp-datum {
  position: relative; width: 100%; max-width: 44px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; font: inherit; font-size: 0.95rem; font-variant-numeric: tabular-nums;
  color: var(--afp-muted); opacity: 0.55; border: 0; background: transparent; padding: 0;
}
.afp-datum--vrij {
  opacity: 1; font-weight: 700; color: var(--afp-accent-tekst); cursor: pointer;
  background: var(--afp-hover); background: color-mix(in srgb, var(--afp-accent) 14%, transparent);
}
.afp-datum--vrij:hover, .afp-datum--vrij:focus-visible { background: color-mix(in srgb, var(--afp-accent) 28%, transparent); }
.afp-datum--gekozen, .afp-datum--gekozen:hover { background: var(--afp-accent); color: var(--afp-on-accent); }
.afp-datum--vandaag::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.afp-slots-vak { min-width: 0; }
.afp-slots-dag { margin: 0.4rem 0 0.9rem; font-size: 1rem; font-weight: 600; color: var(--afp-text); }
.afp-slots { display: flex; flex-direction: column; gap: 0.5rem; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.afp-tijd {
  width: 100%; padding: 0.7rem 0.5rem; border-radius: 8px; border: 1px solid var(--afp-accent);
  background: transparent; color: var(--afp-accent-tekst); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.afp-tijd:hover, .afp-tijd:focus-visible { background: var(--afp-accent); color: var(--afp-on-accent); }

/* formulier */
.afp-gekozen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: var(--afp-card); border: 1px solid var(--afp-line); border-radius: var(--afp-radius); padding: 0.9rem 1rem; margin-bottom: 1.5rem;
}
.afp-gekozen .afp-klein { display: block; margin: 0; }
.afp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; max-width: 640px; }
.afp-form > .afp-stap, .afp-form > .afp-veld[data-veld="email"], .afp-form > .afp-veld--vink,
.afp-form > .afp-veld:has(textarea), .afp-form > div:not(.afp-veld), .afp-form > button, .afp-form > p { grid-column: 1 / -1; }
.afp-veld { margin-bottom: 1rem; }
.afp-veld label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.3rem; }
.afp-veld input:not([type="checkbox"]), .afp-veld textarea, .afp-veld select {
  width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--afp-line); border-radius: 8px;
  background: var(--afp-card); color: var(--afp-text); font: inherit;
}
.afp-veld input:focus, .afp-veld textarea:focus, .afp-veld select:focus { outline: 2px solid var(--afp-accent); outline-offset: 1px; border-color: var(--afp-accent); }
.afp-veld--vink label { font-weight: 400; display: flex; gap: 0.5rem; align-items: flex-start; }
.afp-veld--fout input, .afp-veld--fout textarea, .afp-veld--fout select { border-color: var(--afp-fout); }
.afp-veldfout { color: var(--afp-fout); font-size: 0.85rem; margin: 0.25rem 0 0; }
.afp-ster { color: var(--afp-muted); }
.afp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.afp-knop {
  display: inline-block; justify-self: start; padding: 0.8rem 1.5rem; border: 0; border-radius: var(--afp-knop-radius, 8px);
  background: var(--afp-accent); color: var(--afp-on-accent); font: inherit; font-weight: 700; cursor: pointer;
}
.afp-knop:hover:not(:disabled) { filter: brightness(0.92); }
.afp-knop:disabled { opacity: 0.6; cursor: default; }
.afp-knop--rustig { background: transparent; color: var(--afp-text); border: 1px solid var(--afp-line); }
.afp-knop--gevaar { background: var(--afp-fout); color: #fff; }
.afp-link { background: none; border: 0; padding: 0; font: inherit; color: var(--afp-accent-tekst); text-decoration: underline; cursor: pointer; }
.afp-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 1.25rem 0; }

/* bevestiging en beheer */
.afp-klaar { text-align: center; max-width: 560px; margin: 0 auto; }
.afp-vinkje {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--afp-accent); color: var(--afp-on-accent); font-size: 1.6rem; font-weight: 700;
}
.afp-wanneer { font-size: 1.15rem; font-weight: 600; }
.afp-doorgehaald { text-decoration: line-through; color: var(--afp-muted); }
.afp-beheer { max-width: 640px; }

/* overlay: venster boven de pagina, de pagina blijft gedimd zichtbaar (zoals de Calendly-popup) */
.afp-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(12, 13, 12, 0.6); animation: afp-in 0.15s ease-out;
}
.afp-overlay-paneel {
  position: relative; width: min(940px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain; outline: none;
  background: var(--afp-bg); color: var(--afp-text); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  padding: 2.5rem 2.5rem 2rem;
}
.afp-overlay-paneel > .afp { max-width: none; }
.afp-sluit {
  position: absolute; top: 12px; right: 12px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--afp-line); background: var(--afp-bg); color: var(--afp-text);
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.afp-sluit:hover, .afp-sluit:focus-visible { border-color: var(--afp-accent); }
@keyframes afp-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .afp-overlay { animation: none; } }

@media (max-width: 700px) {
  .afp-overlay { padding: 0; align-items: stretch; }
  .afp-overlay-paneel { max-height: none; border-radius: 0; padding: 3.5rem 1rem 1.5rem; }
  .afp-kiezer { grid-template-columns: 1fr; gap: 1.25rem; padding: 1rem; }
  .afp-slots { max-height: none; overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .afp-form { grid-template-columns: 1fr; }
  .afp-knop { width: 100%; text-align: center; }
}