/* 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.
--------------------------------------------------------------------------- */
/* Flatpickr sizes its day grid in fixed pixels (307.875px per month), which is
   wider than a booking panel on a narrow phone — the last column (Saturday)
   was clipped. Lay the days out as seven equal columns of whatever room there
   is instead, one grid per shown month. */
.booking-calendar .flatpickr-rContainer,
.booking-calendar .flatpickr-days,
.booking-calendar .flatpickr-weekdays {
    width: 100%;
    max-width: none;
}
.booking-calendar .flatpickr-days {
    display: flex;
    gap: 14px;
}
.booking-calendar .dayContainer,
.booking-calendar .flatpickr-weekdaycontainer {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
}

.booking-calendar .flatpickr-day {
    border-radius: 8px;
    color: #1c1917;               /* stone-900 */
    font-weight: 500;
    background: #ffffff;
    border: 1px solid #e7e5e4;    /* stone-200 */
    max-width: none;
    width: auto;
    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;
}

/*
 * "in" / "out" tags on the two chosen days. Two highlighted days can read as
 * two nights, so the second one says plainly that it is the departure morning.
 * The words come from the template (translated) as custom properties.
 */
.booking-calendar .flatpickr-day.startRange,
.booking-calendar .flatpickr-day.endRange,
.booking-calendar .flatpickr-day.selected {
    position: relative;
    overflow: visible;
}
.booking-calendar .flatpickr-day.startRange::after,
.booking-calendar .flatpickr-day.endRange::after,
.booking-calendar .flatpickr-day.selected:not(.startRange):not(.endRange)::after {
    position: absolute;
    left: 50%;
    bottom: 1px;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1;
    text-transform: uppercase;
    color: #fafaf9;
    opacity: .85;
    pointer-events: none;
}
.booking-calendar .flatpickr-day.startRange::after,
.booking-calendar .flatpickr-day.selected:not(.endRange)::after {
    content: var(--check-in-tag, "in");
}
.booking-calendar .flatpickr-day.endRange::after {
    content: var(--check-out-tag, "out");
}
/* A single chosen day is the check-in while the guest is still picking. */
.booking-calendar .flatpickr-day.startRange.endRange::after {
    content: var(--check-in-tag, "in");
}
/* Room for the tag without the number drifting off-centre. */
.booking-calendar .flatpickr-day.startRange,
.booking-calendar .flatpickr-day.endRange,
.booking-calendar .flatpickr-day.selected {
    padding-bottom: 6px;
}

.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%;
    }
}