:root {
  --grond: #EEF1F4;
  --kaart: #FFFFFF;
  --inkt: #17202B;
  --grijs: #5B6673;
  --grijs-donker: #4A5562;
  --grijs-uit: #6B7682;
  --rand: #DCE1E7;
  --rand-licht: #E3E7EC;
  --vinkrand: #7D8794;
  --blauw: #1F5FD1;
  --blauw-hover: #174AA6;
  --blauw-tint: #E5EEFC;
  --vandaag: #F1F6FE;
  --oranje: #C2410C;
  --groen: #0F8A6A;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grond);
  color: var(--inkt);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; }

button { font-family: inherit; color: inherit; }

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.kaart {
  background: var(--kaart);
  border-radius: 20px;
}

.knop,
.knop-blauw,
.knop-icoon {
  height: 44px;
  border-radius: 12px;
  font: 600 15px var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.knop {
  padding: 0 16px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--inkt);
}

.knop-icoon {
  width: 44px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--inkt);
}

.knop-blauw {
  padding: 0 16px;
  border: none;
  background: var(--blauw);
  color: #FFFFFF;
}

.knop:hover, .knop-icoon:hover { background: #F6F8FA; }
.knop-blauw:hover { background: var(--blauw-hover); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  border: 1px solid var(--rand);
  background: var(--kaart);
  font: 500 15px var(--font);
  cursor: pointer;
}

.chip:hover { background: #F6F8FA; }

/* Vinkje zoals in het ontwerp */
.vakje {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid var(--vinkrand);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.vakje svg { display: none; }

[aria-pressed="true"] .vakje {
  background: var(--blauw);
  border-color: var(--blauw);
}

[aria-pressed="true"] .vakje svg { display: block; }

[aria-pressed="true"] .naam {
  color: var(--grijs-uit);
  text-decoration: line-through;
}

.stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Korte melding onderin beeld */
.melding {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: var(--inkt);
  color: #FFFFFF;
  padding: 14px 22px;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 50;
  max-width: calc(100vw - 32px);
}

.melding.zichtbaar {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dialoog {
  border: none;
  border-radius: 24px;
  padding: 28px;
  width: min(560px, calc(100vw - 32px));
  color: var(--inkt);
  font-family: var(--font);
}

.dialoog::backdrop { background: rgba(23, 32, 43, 0.45); }

.dialoog h2 { font-size: 24px; margin-bottom: 16px; }

.dialoog form { display: flex; flex-direction: column; gap: 16px; }

.invoer {
  height: 52px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 0 16px;
  font: 500 18px var(--font);
  color: var(--inkt);
  background: var(--kaart);
  width: 100%;
  min-width: 0;
}

.invoer:focus { outline: 2px solid var(--blauw); outline-offset: 1px; }

.dialoog-knoppen { display: flex; justify-content: flex-end; gap: 10px; }
.dialoog-knoppen button { height: 52px; font-size: 17px; padding: 0 22px; }

/* ---------- Spraak ---------- */

.spraak-dialoog { width: min(640px, calc(100vw - 32px)); }
.spraak-form { display: flex; flex-direction: column; gap: 18px; }
.spraak-uitleg { margin: 0; color: var(--grijs); font-size: 16px; line-height: 1.4; }

.gehoord { display: flex; align-items: flex-start; gap: 16px; }
.gehoord-icoon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blauw);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gehoord-label { font-size: 14px; font-weight: 600; color: var(--grijs); }
.gehoord-tekst { font-size: 22px; font-weight: 600; line-height: 1.3; }

.spraak-antwoord { margin: 0; font-size: 19px; line-height: 1.4; }

.voorstel {
  margin: 0;
  border: none;
  background: #F4F6F8;
  border-radius: 16px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
}

.voorstel legend {
  float: left;
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 15px;
  color: var(--grijs);
  padding: 0;
  margin-bottom: 4px;
}

.voorstel > label, .voorstel .label { color: var(--grijs); font-weight: 600; font-size: 16px; }
.voorstel .invoer { height: 46px; font-size: 17px; }
.voorstel select.invoer { appearance: auto; }

.tijden { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tijden input[type="time"] { width: 120px; }
.tijden input:disabled { opacity: 0.45; }
.hele-dag { display: flex; align-items: center; gap: 6px; font-size: 16px; margin-left: 6px; }
.hele-dag input { width: 20px; height: 20px; }

.knop-rood {
  height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 12px;
  background: #B42318;
  color: #FFFFFF;
  font: 600 15px var(--font);
  cursor: pointer;
}
.knop-rood:hover { background: #912018; }

.verwijder-blok {
  background: #FDF1EF;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.verwijder-kop { font-weight: 700; font-size: 15px; color: #912018; }
.verwijder-rij { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.35; cursor: pointer; }
.verwijder-rij input { width: 22px; height: 22px; flex-shrink: 0; }
.verwijder-wanneer { color: var(--grijs); font-size: 15px; }

@media (max-width: 480px) {
  .voorstel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .voorstel > label, .voorstel .label { margin-top: 6px; }
}