.klokin-datepicker {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    visibility: hidden;
    will-change: opacity, transform;
    transition: opacity 0.2s ease-in-out, 
                transform 0.2s ease-in-out, 
                visibility 0s linear 0.2s;
    z-index: 60; 
}

.klokin-datepicker.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.2s ease-in-out, 
                transform 0.2s ease-in-out, 
                visibility 0s linear 0s;
}

.kd-day {
    transition: background-color 0.1s ease, color 0.1s ease;
}