/**
 * Skins the bundled flatpickr calendar to the Kairo palette.
 *
 * Falls back to literal hex values wherever the theme's custom properties are
 * unavailable, so the picker still looks deliberate if the plugin is used
 * under a different theme.
 *
 * The unavailable-day styling is the point of this file: closed days,
 * blackout dates and fully-booked days must read as clearly inert, not merely
 * as slightly dimmer.
 */

.flatpickr-calendar {
    background: var(--color-warm-white, #FFFFFE);
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--color-mid-gray, #E8E6E7);
    box-shadow: 0 8px 28px rgba(45, 52, 54, 0.12);
    font-family: var(--font-body, 'Poppins', sans-serif);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
    border-bottom-color: var(--color-warm-white, #FFFFFE);
}

.flatpickr-months {
    padding: 6px 0 2px;
}

.flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: var(--color-primary, #57676B);
    fill: var(--color-primary, #57676B);
    font-family: var(--font-display, 'Montserrat', sans-serif);
    font-weight: 500;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--color-primary, #57676B);
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--color-secondary, #74847C);
}

span.flatpickr-weekday {
    color: var(--color-text-muted, #636e72);
    font-family: var(--font-accent, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.flatpickr-day {
    border-radius: var(--radius-sm, 4px);
    color: var(--color-text, #2D3436);
    font-size: 14px;
}

.flatpickr-day:hover:not(.flatpickr-disabled):not(.selected) {
    background: var(--color-tertiary-pale, #D8E0DC);
    border-color: var(--color-tertiary-pale, #D8E0DC);
}

.flatpickr-day.today:not(.selected) {
    border-color: var(--color-tertiary, #9DABA8);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--color-secondary, #74847C);
    border-color: var(--color-secondary, #74847C);
    color: var(--color-warm-white, #FFFFFE);
}

/*
 * Unavailable days: closed weekdays, blackout dates, and days whose every
 * slot is taken. Struck through as well as dimmed so the state does not rely
 * on colour alone.
 */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    background: var(--color-light-gray, #F2F1F2);
    border-color: transparent;
    color: #B9BEC0;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    background: transparent;
    text-decoration: none;
}

/* The visible alt input inherits the form's own field styling. */
.form-group input.form-control[readonly].flatpickr-input,
.form-group .flatpickr-input.form-control {
    background-color: var(--color-warm-white, #FFFFFE);
    cursor: pointer;
}