body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #f5f6f8;
  color: #222;
}

.wijzig-afspraak {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

.panel {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  margin-bottom: 16px;
}

.panel.hidden {
  display: none;
}

/* Generieke verberg-class, o.a. voor de vormwijziging-regel in de bevestigingsmodal. */
.hidden {
  display: none;
}

h1 {
  color: #1a3c6e;
  font-size: 20px;
  margin: 0 0 12px;
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  letter-spacing: 4px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

input[type="email"] {
  width: 100%;
  padding: 10px;
  font-size: 15px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.pincode-boxes {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.pincode-box {
  width: 44px !important;
  height: 52px;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 600;
  letter-spacing: 0 !important;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.pincode-box:focus {
  outline: none;
  border-color: #1a3c6e;
  box-shadow: 0 0 0 2px rgba(26, 60, 110, 0.2);
}

.huidige-afspraak {
  background: #f0f4fa;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.huidige-afspraak strong {
  color: #1a3c6e;
}

.toon-alle-adviseurs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  cursor: pointer;
}

.toon-alle-adviseurs.hidden {
  display: none;
}

.toon-alle-adviseurs input {
  cursor: pointer;
}

button.primary {
  margin-top: 16px;
  background: #1a3c6e;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 15px;
  cursor: pointer;
}

button.primary:disabled {
  background: #a9b6c9;
  cursor: not-allowed;
}

button.secondary {
  margin-top: 16px;
  margin-right: 8px;
  background: #fff;
  color: #1a3c6e;
  border: 1px solid #1a3c6e;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 15px;
  cursor: pointer;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal-overlay.hidden {
  display: none;
}

.modal-box {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-box h2 {
  color: #1a3c6e;
  font-size: 18px;
  margin: 0 0 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.feedback {
  min-height: 18px;
  font-size: 13px;
  color: #b00020;
}

/* Een laadmelding is geen fout, dus niet in het rood van .feedback. */
.feedback.laden {
  color: #1a3c6e;
}

/* Zandloper bij "Beschikbaarheid laden...". Het omkeren zit NIET meer in CSS: een CSS-animatie werd
   uitgezet door `prefers-reduced-motion: reduce` (staat aan zodra Windows' animatie-effecten uit
   staan) en bleef bovendien weg zolang de browser een oudere versie van dit bestand gecached had. Het
   omkeren gebeurt nu in JS met een inline transform (startZandloper in wijzig-afspraak.js), wat van
   geen van beide afhankelijk is. Hier blijft alleen de plaatsing staan, zodat transform werkt. */
.zandloper {
  display: inline-block;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.picker-layout {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.calendar-col,
.slots-col {
  flex: 1 1 240px;
}

.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.weekday-row,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}

.weekday-row {
  font-size: 12px;
  color: #888;
  margin-bottom: 4px;
}

.day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 6px 0;
  border: none;
  border-radius: 4px;
  background: #eee;
  cursor: not-allowed;
  color: #aaa;
  font-size: 14px;
}

/* Placeholder houdt alle dagvakjes even hoog, ook de dagen zonder vinkje. */
.day-cell::after {
  content: '';
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  font-weight: bold;
}

.day-cell.available {
  background: #dcecff;
  color: #1a3c6e;
  cursor: pointer;
}

/* Groen vinkje op dagen waar tijden te kiezen zijn. */
.day-cell.available::after {
  content: '\2713';
  color: #1e8e3e;
}

/* Lichter groen voor leesbaarheid op de donkerblauwe achtergrond van de gekozen dag. */
.day-cell.selected::after {
  color: #7fe3a3;
}

.day-cell.selected {
  background: #1a3c6e;
  color: #fff;
}

.day-cell.muted {
  background: transparent;
}

.day-cell.current {
  outline: 2px solid #d32f2f;
  outline-offset: -2px;
}

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

.slot {
  padding: 8px 12px;
  border: 1px solid #1a3c6e;
  border-radius: 4px;
  background: #fff;
  color: #1a3c6e;
  cursor: pointer;
}

.slot.selected {
  background: #1a3c6e;
  color: #fff;
}

.slot.current {
  outline: 2px solid #d32f2f;
  outline-offset: -2px;
}

.slot:disabled {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

.status-toggle {
  display: block;
  margin: 0 0 12px;
  padding: 4px 0;
  background: none;
  border: none;
  color: #1a3c6e;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.status-panel h2 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #1a3c6e;
}

.debug-status {
  margin: 0;
  padding: 12px;
  background: #f0f2f5;
  border-radius: 4px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}

.debug-status.error {
  background: #fdecea;
  color: #b00020;
}