/* Direct flatpickr fixes - these should override any conflicting styles */

/* Ensure the calendar is visible */
.flatpickr-calendar {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 99 !important;
    background-color: white !important;
}

/* Ensure calendar container takes up appropriate space */
#booking-calendar-container {
    width: 100% !important;
    min-height: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background-color: white !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Fix flatpickr calendar internals */
.flatpickr-rContainer {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.flatpickr-innerContainer {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

/* Make month name and navigation visible */
.flatpickr-month {
    background-color: transparent !important;
    color: #333 !important;
    height: auto !important;
    overflow: visible !important;
    text-align: center !important;
    position: relative !important;
    padding: 10px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 50px !important;
}

.flatpickr-current-month {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    display: inline-block !important;
    visibility: visible !important;
    position: relative !important;
    color: #333 !important;
    opacity: 1 !important;
    left: 0 !important;
    transform: none !important;
    padding: 0 !important;
    width: auto !important;
}

.flatpickr-current-month .numInputWrapper {
    display: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display: inline-block !important;
    visibility: visible !important;
}

/* Fix arrow navigation */
.flatpickr-months {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 !important;
    width: 100% !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    display: block !important;
    padding: 6px !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 10px !important;
    height: auto !important;
    z-index: 10 !important;
    fill: #555 !important;
    color: #555 !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    text-align: center !important;
    width: 34px !important;
    height: 34px !important;
}

.flatpickr-months .flatpickr-prev-month {
    left: 10px !important;
}

.flatpickr-months .flatpickr-next-month {
    right: 10px !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Fix days display */
.flatpickr-days {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow: visible !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
    padding: 0 !important;
    outline: 0 !important;
}

.flatpickr-day {
    border-radius: 50% !important;
    height: 40px !important;
    line-height: 40px !important;
    max-width: 40px !important;
    margin: 3px auto !important;
    cursor: pointer !important;
    display: inline-block !important;
    position: relative !important;
    font-weight: 400 !important;
    text-align: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    background: none !important;
    font-size: 14px !important;
    flex: 0 0 14.2857% !important;
}

/* Ensure selected days are properly styled */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--primary-color, #0b9186) !important;
    color: white !important;
    border-color: var(--primary-color, #0b9186) !important;
}

/* Ensure today is highlighted */
.flatpickr-day.today {
    border-color: var(--primary-color, #0b9186) !important;
}

/* Fix day hover state */
.flatpickr-day:hover:not(.flatpickr-disabled) {
    background-color: #f0f0f0 !important;
}

/* Hide weekdays as requested */
.flatpickr-weekdays,
.flatpickr-weekday {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix loading placeholder */
.calendar-placeholder {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 30px 0 !important;
    text-align: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: white !important;
    z-index: 100 !important;
}

.spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid rgba(11, 145, 134, 0.2) !important;
    border-top-color: var(--primary-color, #0b9186) !important;
    border-radius: 50% !important;
    animation: spinner-rotate 1s linear infinite !important;
    margin-bottom: 15px !important;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}

/* Error message styling */
.calendar-error {
    width: 100% !important;
    padding: 20px !important;
    text-align: center !important;
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 8px !important;
}

/* Ensure proper calendar container height when empty */
.inline-calendar {
    min-height: 400px !important;
}

/* Ensure proper animation on calendar redraw */
.flatpickr-calendar.animate.open {
    animation: none !important;
}

/* Fix legends */
.legend-color.available {
    background-color: white !important;
    border: 1px solid #ddd !important;
}

.legend-color.unavailable {
    background-color: #f8f8f8 !important;
    border: 1px solid #ddd !important;
    position: relative !important;
}

.legend-color.unavailable::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: -3px !important;
    right: -3px !important;
    height: 1px !important;
    background-color: #e95151 !important;
    transform: rotate(-45deg) !important;
}

.legend-color.selected {
    background-color: var(--primary-color, #0b9186) !important;
    border: 1px solid var(--primary-color, #0b9186) !important;
}

/* Show the calendar when flatpickr is initialized */
.flatpickr-calendar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide loading placeholder when calendar is visible */
.flatpickr-calendar:not(:empty) ~ .calendar-placeholder {
    display: none !important;
}

/* Make sure the calendar frame doesn't hide the flatpickr calendar */
.calendar-frame {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
}

/* Additional fixes for important calendar components */
.flatpickr-month, 
.flatpickr-monthDropdown-months, 
.flatpickr-weekdaycontainer, 
.flatpickr-days {
    display: block !important;
    visibility: visible !important;
}