/* Button Styles */
.uk-button-group {
    gap: 1px;
}

.uk-button {
    text-transform: none;
    height: 40px;
    line-height: 38px;
    padding: 0 15px;
}

.uk-button.uk-active {
    background: var(--youpod-youevents);
    color: white;
}

.calendar-btn {
    width: 40px;
    padding: 0 !important;
}

/* Select Styles */
.uk-select {
    height: 40px;
    padding: 0 10px;
    min-width: 150px;
}

/* Flatpickr Customization */
.calendar-wrapper {
    position: relative;
}

.flatpickr-calendar {
    margin-top: 2px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .08) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--youpod-color-youevent, #007bff) !important;
    border-color: var(--youpod-color-youevent, #007bff) !important;
    color: white !important;
}

.flatpickr-day.inRange {
    background: rgba(0, 123, 255, 0.1) !important;
    border-color: rgba(0, 123, 255, 0.1) !important;
    box-shadow: -5px 0 0 rgba(0, 123, 255, 0.1), 5px 0 0 rgba(0, 123, 255, 0.1);
}

/* Results and Loading State */
#events-result {
    position: relative;
    min-height: 200px;
}

#events-result [uk-spinner] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Spacing */
.uk-flex {
    gap: 10px;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    .uk-button-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .uk-form-width-small {
        width: 100%;
        min-width: 0;
    }
}