/* ===== GRID LAYOUT ===== */
.cac2-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

/* ===== KAART ===== */
.cac2-calendar{
    background:#3F6B4F; /* nieuwe groene kleur */
    padding:25px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* ===== TITEL ===== */
.cac2-calendar h3{
    text-align:center;
    margin-bottom:15px;
    color:#ffffff;
    font-weight:600;
    letter-spacing:0.5px;
}

/* ===== CONTROLS ===== */
.cac2-controls{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-bottom:15px;
}

.cac2-controls select{
    background:#1a1a1a;
    color:#ffffff;
    border:1px solid #333;
    padding:6px 10px;
    border-radius:6px;
    font-size:14px;
}

/* ===== TABEL ===== */
.cac2-calendar table{
    width:100%;
    border-collapse:separate;
    border-spacing:4px;
}

.cac2-calendar th{
    font-size:13px;
    font-weight:600;
    color:#ffffff;
    padding-bottom:8px;
    opacity:0.8;
}

/* ===== DAGEN ===== */
.cac2-calendar td{
    text-align:center;
    padding:10px 0;
    border-radius:8px;
    font-weight:500;
    transition:background 0.2s ease, transform 0.15s ease;
}

/* ===== STATUS ===== */
.free{
    background:#4CAF50;
    color:#ffffff;
}

.booked{
    background:#c62828;
    color:#ffffff;
}

/* ===== VANDAAG ===== */
.today{
    outline:2px solid #ffffff;
    outline-offset:1px;
}

/* ===== HOVER (SUBTIEL & PROFESSIONEEL) ===== */
.cac2-calendar td:hover{
    transform:translateY(-2px);
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
    .cac2-grid{
        grid-template-columns:1fr;
    }
}

/* ===== FADE ANIMATIE ===== */
.cac2-body {
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.cac2-body.fade-out {
    opacity: 0;
    transform: translateY(5px);
}

.cac2-body.fade-in {
    opacity: 1;
    transform: translateY(0);
}