/* Booking calendar — visual polish for Flatpickr */

.booking-calendar .flatpickr-calendar {
    box-shadow: none;
    border: none;
    background: transparent;
    width: 100%;
    max-width: none;
}

.booking-calendar .flatpickr-calendar.inline {
    display: block;
    width: 100%;
    /* Flatpickr sets its own pixel width per month; centre whatever is left over
       so a single month doesn't hug the left edge of the booking panel. */
    margin-inline: auto;
}

.booking-calendar .flatpickr-months .flatpickr-month {
    color: #1c1917; /* stone-900 */
    background: transparent;
}

.booking-calendar .flatpickr-current-month {
    font-weight: 600;
    font-size: 0.95rem;
    padding-top: 4px;
}

.booking-calendar .flatpickr-weekdays {
    background: transparent;
}

.booking-calendar .flatpickr-weekday {
    color: #78716c; /* stone-500 */
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Day cells -------------------------------------------------------------
   One question per cell: "can I click this?"  Three looks, nothing else:
     available     — white card with a border (reads as a button)
     unavailable   — flat, faded grey text with a strike, no fill (past + booked)
     selected      — dark fill; days in between get a light tint
   Plus one special: check-out only (first booked night of a block) — the
   morning is free, the night is not: left half white, right half grey.
--------------------------------------------------------------------------- */
.booking-calendar .flatpickr-day {
    border-radius: 8px;
    color: #1c1917;               /* stone-900 */
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #e7e5e4;    /* stone-200 */
    max-width: 40px;
    height: 40px;
    line-height: 38px;
    margin: 2px 0;
}

.booking-calendar .flatpickr-day:hover:not(.flatpickr-disabled) {
    background: #f5f5f4;          /* stone-100 */
    border-color: #a8a29e;        /* stone-400 */
}

.booking-calendar .flatpickr-day.today:not(.flatpickr-disabled) {
    border-color: #1c1917;
}

/* Unavailable: past days and booked nights look the same — not clickable. */
.booking-calendar .flatpickr-day.flatpickr-disabled,
.booking-calendar .flatpickr-day.flatpickr-disabled:hover {
    background: transparent;
    border-color: transparent;
    color: #a8a29e;               /* stone-400 */
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    cursor: not-allowed;
    opacity: 1;
}
.booking-calendar .flatpickr-day[data-state="past"],
.booking-calendar .flatpickr-day[data-state="past"]:hover {
    color: #d6d3d1;               /* stone-300 — even quieter */
    text-decoration: none;
}

/* Check-out only: half white / half grey; clickable once a check-in is chosen. */
.booking-calendar .flatpickr-day[data-state="checkout-only"],
.booking-calendar .flatpickr-day[data-state="checkout-only"]:hover {
    background: linear-gradient(135deg, #ffffff 50%, #e7e5e4 50%);
    border-color: #e7e5e4;
    color: #57534e;               /* stone-600 */
    text-decoration: none;
}
.booking-calendar .flatpickr-day[data-state="checkout-only"].flatpickr-disabled {
    cursor: not-allowed;
    color: #a8a29e;
}
.booking-calendar .flatpickr-day[data-state="checkout-only"]:not(.flatpickr-disabled) {
    cursor: pointer;
    border-color: #a8a29e;
}

/* Selection */
.booking-calendar .flatpickr-day.selected,
.booking-calendar .flatpickr-day.startRange,
.booking-calendar .flatpickr-day.endRange,
.booking-calendar .flatpickr-day.selected:hover,
.booking-calendar .flatpickr-day.startRange:hover,
.booking-calendar .flatpickr-day.endRange:hover {
    background: #1c1917 !important; /* stone-900 */
    border-color: #1c1917 !important;
    color: #fafaf9 !important;
    text-decoration: none;
}

.booking-calendar .flatpickr-day.inRange,
.booking-calendar .flatpickr-day.inRange:hover {
    background: #e7e5e4;          /* stone-200 */
    border-color: #e7e5e4;
    color: #1c1917;
    box-shadow: -5px 0 0 #e7e5e4, 5px 0 0 #e7e5e4;
}

.booking-calendar .flatpickr-day.prevMonthDay,
.booking-calendar .flatpickr-day.nextMonthDay {
    visibility: hidden;           /* don't show neighbouring-month spill-over */
}

/* Two months side by side: tighter on desktop */
@media (min-width: 768px) {
    .booking-calendar .flatpickr-calendar.hasWeeks,
    .booking-calendar .flatpickr-calendar {
        width: 100%;
    }
    .booking-calendar .flatpickr-days {
        width: 100%;
    }
}