.mini-availability-wrap { 
    font-family: system-ui, Arial, sans-serif; 
    max-width:100%;    
    display: flex;
    justify-content: center;   /* centers horizontally */
    gap: 20px;                 /* space between months */
    flex-wrap: wrap;           /* allows wrapping on small screens */
    margin: 0 auto;            /* ensures outer centering */
}
.mini-availability-header { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.mini-cal-nav button { background:transparent; border:0; font-size:20px; cursor:pointer; padding:6px; }
.mini-cal-legend { display:flex; gap:12px; align-items:center; color:#666; font-size:13px; }


.mini-availability-calendars { display:flex; gap:24px; flex-wrap:nowrap; overflow:hidden; }

.mini-mini-month { 
    width: 260px; 
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.mini-mini-month table { width:100%; border-collapse:collapse; text-align:center; color:#666; }
.mini-mini-month th.month-title { text-align:left; padding:6px 0; font-weight:600; color:#222; }
.mini-mini-month thead th { font-weight:600; font-size:11px; padding-bottom:6px; color:#b3b3b3; text-transform:lowercase; text-align: center;}
.mini-mini-month td { padding:4px 2px; height:34px; vertical-align:top; position:relative; font-size:13px; }
.mini-mini-month td .day-num { display:block; font-size:15px; color:#333; }
.mini-mini-month td .dot { display:block; width:8px; height:8px; border-radius:50%; margin:4px auto 0; }
.mini-cal-legend .dot {
    display: inline-block;   /* inline with text */
    width: 10px;             /* size of dot */
    height: 10px;
    border-radius: 50%;      /* circle */
    margin-right: 6px;
    vertical-align: middle;
}

.mini-cal-legend .dot.green   { background: #28a745; }
.mini-cal-legend .dot.orange  { background: #f6a500; }
.mini-cal-legend .dot.red     { background: #dc3545; }
.mini-cal-legend .dot.gray    { background: #cfcfcf; }


.dot.green { background:#28a745; }
.dot.orange { background:#f6a500; }
.dot.red { background:#dc3545; }
.dot.gray { background:#cfcfcf; }

/* small visual for clickable cells */
.mini-mini-month td.clickable { cursor:pointer; }
.mini-mini-month td.clickable:hover { background: rgba(0,0,0,0.02); border-radius:4px; }

/* popup */
.mini-cal-popup {
  position:absolute;
  z-index:9999;
  background:#fff;
  border:1px solid #e6e6e6;
  padding:8px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border-radius:6px;
  min-width:160px;
  font-size:13px;
}
.mini-cal-popup .mini-cal-popup-actions { margin-top:8px; display:flex; gap:8px; justify-content:flex-end; }
.mini-cal-popup button { padding:6px 8px; border-radius:4px; border:1px solid #ddd; background:#fff; cursor:pointer; }
.mini-cal-popup button.mini-cal-save { background:#28a745; color:#fff; border-color: #23903a; }

@media (max-width: 768px) {
    .mini-cal-wrapper {
        width: 100%;
        overflow-x: auto;
    }
    .mini-month {
        width: 100%;
    }
}

/* Verwijder de oude stipjes indien nodig */
.mini-mini-month td .dot {
    display: none;
}

/* Stijl de cellen */
.mini-mini-month td {
    padding: 8px; /* Of naar wens voor de grootte van het vakje */
    text-align: center;
    border-radius: 8px; /* Voor die rounded corners */
    transition: background-color 0.3s ease;
}

/* De kleuren */
.mini-mini-month td.status-green {
    background-color: #5cb85c; /* Groen zoals in screenshot */
    color: #fff;
}

.mini-mini-month td.status-red {
    background-color: #d9534f; /* Rood zoals in screenshot */
    color: #fff;
}

.mini-mini-month td.status-orange {
    background-color: #f0ad4e; /* Oranje */
    color: #fff;
}

.mini-mini-month td.status-gray {
    background-color: transparent; /* Of een lichte kleur voor lege dagen */
    color: inherit;
}

/* Zorg dat het cijfer goed leesbaar blijft */
.day-num {

    display: block;
}

.btn-plan-moment {
    /* Kleuren */
    background-color: #b0a08a; /* De beige/taupe kleur uit de afbeelding */
    color: #ffffff;
    
    /* Layout & Spacing */
    display: inline-flex;
    align-items: center;
    padding: 12px 30px;
    gap: 10px; /* Ruimte tussen icoon en tekst */
    
    /* Vorm */
    border-radius: 50px; /* Maakt de knop volledig rond aan de zijkanten */
    border: none;
    
    /* Tekst styling */
    font-family: sans-serif; /* Vervang door je eigen font */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    
    /* Interactie */
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.btn-plan-moment:hover {
    background-color: #9e8e78; /* Iets donkerder bij hover */
}

/* Styling voor het icoontje (als je FontAwesome of een SVG gebruikt) */
.btn-plan-moment i, 
.btn-plan-moment svg {
    width: 18px;
    height: 18px;
}