/* Rental period date-range picker styles (Flatpickr) */
.pc-rental-period-wrap input.flatpickr-input.form-control {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.flatpickr-calendar {
    font-size: 16px;
}

/* Calendar is appended to body, so these overrides are global to flatpickr calendar */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected.inRange,
.flatpickr-calendar .flatpickr-day.startRange.inRange,
.flatpickr-calendar .flatpickr-day.endRange.inRange,
.flatpickr-calendar .flatpickr-day.selected:focus,
.flatpickr-calendar .flatpickr-day.startRange:focus,
.flatpickr-calendar .flatpickr-day.endRange:focus,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
    background: #FF2525;
    border-color: #FF2525;
    color: #fff;
}

.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.prevMonthDay.inRange,
.flatpickr-calendar .flatpickr-day.nextMonthDay.inRange {
    background: rgba(255, 37, 37, 0.18);
    border-color: rgba(255, 37, 37, 0.18);
    box-shadow: -5px 0 0 rgba(255, 37, 37, 0.18), 5px 0 0 rgba(255, 37, 37, 0.18);
}

/* Mobile: keep the calendar centered and visible */
@media (max-width: 767px) {
    body > .flatpickr-calendar {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        width: min(calc(100vw - 24px), 340px) !important;
        max-width: min(calc(100vw - 24px), 340px) !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        max-height: min(85vh, 520px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        z-index: 10050 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    }

    body > .flatpickr-calendar.arrowTop:before,
    body > .flatpickr-calendar.arrowTop:after,
    body > .flatpickr-calendar.arrowBottom:before,
    body > .flatpickr-calendar.arrowBottom:after {
        display: none !important;
    }
}