.cm-afspraak {
  margin-top: 28px;
}

.cm-afspraak-grid-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(23, 23, 23, 0.1);
  border-radius: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(97, 184, 59, 0.5) transparent;
}

.cm-afspraak-grid-wrap::-webkit-scrollbar {
  height: 6px;
}

.cm-afspraak-grid-wrap::-webkit-scrollbar-thumb {
  background: rgba(97, 184, 59, 0.4);
  border-radius: 999px;
}

.cm-afspraak-grid-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.cm-afspraak-grid {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 640px;
}

/* ---------- Kop met dagen/data ---------- */
.cm-afspraak-grid thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  padding: 12px 6px 14px;
  border-bottom: 2px solid rgba(23, 23, 23, 0.08);
  font-weight: 400;
  vertical-align: bottom;
}

.cm-afspraak-weekday {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #161616;
  text-transform: capitalize;
}

.cm-afspraak-date {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(22, 22, 22, 0.55);
  margin-top: 2px;
  white-space: nowrap;
}

/* ---------- Tijdkolom (links, vastgezet bij scrollen) ---------- */
.cm-afspraak-time-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  border-right: 1px solid rgba(23, 23, 23, 0.08);
  padding: 0 16px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #161616;
  text-align: right;
  white-space: nowrap;
}

/* Hoekcel (leeg) moet boven zowel de sticky rij als kolom blijven liggen */
.cm-afspraak-grid thead th.cm-afspraak-time-col {
  z-index: 3;
}

/* ---------- Rijen / cellen ---------- */
.cm-afspraak-grid tbody th,
.cm-afspraak-grid tbody td {
  border-bottom: 1px solid rgba(23, 23, 23, 0.06);
  height: 44px;
  text-align: center;
  vertical-align: middle;
}

.cm-afspraak-grid tbody tr:last-child th,
.cm-afspraak-grid tbody tr:last-child td {
  border-bottom: none;
}

.cm-afspraak-grid tbody tr:hover .cm-afspraak-time-col {
  background: rgba(97, 184, 59, 0.06);
}

/* Cel met een gekozen tijdslot krijgt een lichte accentkleur
   (progressive enhancement, negeert bij oudere browsers zonder :has) */
.cm-afspraak-grid td:has(.cm-afspraak-radio:checked) {
  background: rgba(97, 184, 59, 0.07);
  border-radius: 10px;
}

/* ---------- Tijdslot (basislayout, gedeeld door alle statussen) ---------- */
.cm-afspraak-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.cm-afspraak-dot {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(23, 23, 23, 0.18);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cm-afspraak-dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(99deg, #61b83b, #2b521a 238.98%);
  transform: scale(0);
  transition: transform 0.15s ease;
}

/* ---------- Beschikbaar tijdslot (radio) ---------- */
.cm-afspraak-slot-free {
  cursor: pointer;
}

.cm-afspraak-radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cm-afspraak-slot-free:hover .cm-afspraak-dot {
  border-color: #61b83b;
}

.cm-afspraak-radio:checked + .cm-afspraak-dot {
  border-color: #61b83b;
}

.cm-afspraak-radio:checked + .cm-afspraak-dot::after {
  transform: scale(1);
}

.cm-afspraak-radio:focus-visible + .cm-afspraak-dot {
  box-shadow: 0 0 0 3px rgba(97, 184, 59, 0.35);
}

/* ---------- Bezet tijdslot ---------- */
.cm-afspraak-slot-taken {
  cursor: default;
}

.cm-afspraak-slot-taken .cm-afspraak-dot {
  border-color: rgba(23, 23, 23, 0.12);
  background: rgba(23, 23, 23, 0.08);
}

/* ---------- Niet-beschikbaar tijdslot ---------- */
.cm-afspraak-slot-none::after {
  content: "";
  display: block;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: rgba(23, 23, 23, 0.15);
}

/* ---------- Foutmelding ---------- */
.cm-afspraak-error {
  font-size: 15px;
  color: rgba(22, 22, 22, 0.6);
}

/* ---------- Mobiel: iets compacter ---------- */
@media (max-width: 640px) {
  .cm-afspraak-weekday {
    font-size: 13px;
  }

  .cm-afspraak-date {
    font-size: 11px;
  }

  .cm-afspraak-time-col {
    font-size: 13px;
  }

  .cm-afspraak-slot {
    width: 32px;
    height: 32px;
  }

  .cm-afspraak-dot {
    width: 20px;
    height: 20px;
  }
}