/* Modern Flatpickr Theme - Custom Green Color */
.flatpickr-calendar {
    background: #ffffff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 320px !important;
    height: auto !important;
    max-width: 95vw;
}

/* Make the inner calendar responsive */
.flatpickr-innerContainer,
.flatpickr-rContainer {
    width: 100% !important;
    height: auto !important;
}

.flatpickr-days {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 10px; /* Added padding here */
}

/* FIXED: Proper 7-column grid alignment */
.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
}

/* Header styling - GREEN GRADIENT */
.flatpickr-months {
    background: linear-gradient(135deg, #0c532b 0%, #0a4323 100%);
    border-radius: 16px 16px 0 0;
    padding: 20px 15px;
    height: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.flatpickr-month {
    color: white;
    fill: white;
    height: auto !important;
    display: flex !important;
    align-items: center;
    flex: 1;
}

.flatpickr-current-month {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    padding: 5px 10px !important;
    position: static !important;
    width: auto !important;
}

/* Month dropdown */
.flatpickr-monthDropdown-months {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 5px !important;
    appearance: auto !important;
    font-size: 16px !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
}

.flatpickr-monthDropdown-months option {
    background: white !important;
    color: #2d3748 !important;
}

/* Year input */
.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
    color: white !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 5px 6px !important;
    font-size: 16px !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

/* GRE-959: flatpickr sizes the year's WRAPPER at 6ch (about 58px here) and the
   rule above forces the input inside it to 60px plus its border — so the box
   was cut off on the right. The wrapper is given room for the whole box. */
.flatpickr-current-month .numInputWrapper {
    width: 64px !important;
    min-width: 64px !important;
    flex: 0 0 auto;
}

/* GRE-959: the in-page calendar (product page, search cards) shows no year.
   Francois, 21 Sep 2026: "do we need to have the year?" No: a rental is booked
   days or weeks ahead, the arrows cross from December into January on their
   own, and "January" after "December" cannot be misread. With it gone nothing
   can be clipped — on a 320px phone the year used to read "202" — and the full
   month name fits between the arrows. The pop-up calendar on the dates page
   keeps its year: it has the room. */
.gg-card-calendar .flatpickr-current-month .numInputWrapper {
    display: none !important;
}

@media (max-width: 379px) {
    .gg-card-calendar .flatpickr-current-month {
        padding: 5px 2px !important;
    }

    /* "September" is the longest; at 14px it fits the ~118px between the arrows. */
    .gg-card-calendar .flatpickr-monthDropdown-months {
        font-size: 14px !important;
        padding: 3px 2px !important;
    }
}

/* Month text (static display) */
.flatpickr-current-month .cur-month {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-weight: 600 !important;
    color: white !important;
    margin-right: 5px !important;
}

/* Navigation arrows */
.flatpickr-prev-month,
.flatpickr-next-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    position: static !important;
    width: 32px !important;
    height: 32px !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: white !important;
    width: 20px !important;
    height: 20px !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* FIXED: Weekday labels with grid */
.flatpickr-weekdays {
    background: #f8f9fa;
    padding: 10px 10px 10px 10px;
    width: 100% !important;
    height: auto !important;
}

.flatpickr-weekdaycontainer {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
}

span.flatpickr-weekday {
    color: #6c757d;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    height: auto !important;
}

/* FIXED: Day cells with grid layout */
.flatpickr-day {
    border-radius: 8px;
    font-weight: 500;
    color: #2d3748;
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    border: 1px solid transparent !important;
    margin: 0 !important;
}

.flatpickr-day:not(.flatpickr-disabled):hover {
    background: #e9ecef;
    border-color: #e9ecef !important;
}

.flatpickr-day.today {
    border-color: #0c532b !important;
    background: rgba(12, 83, 43, 0.1);
    color: #0c532b;
    font-weight: 600;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: linear-gradient(135deg, #0c532b 0%, #0a4323 100%) !important;
    border-color: #0c532b !important;
    color: white !important;
    font-weight: 600;
}

/* Time picker - RESPONSIVE */
.flatpickr-time {
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
    border-top: 2px solid #e9ecef;
    padding: 20px 10px;
    border-radius: 0 0 16px 16px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* Time input wrappers */
.flatpickr-time .numInputWrapper {
    flex: 0 0 auto;
    height: auto !important;
}

/* Time inputs */
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    color: #2d3748;
    font-size: 20px;
    font-weight: 700;
    height: 50px !important;
    width: 60px;
    padding: 0;
    text-align: center;
}

.flatpickr-time input:hover {
    border-color: #0c532b;
}

.flatpickr-time input:focus {
    border-color: #0c532b;
    outline: none;
    background: rgba(12, 83, 43, 0.05);
}

/* Time separator */
.flatpickr-time-separator {
    color: #0c532b;
    font-weight: 700;
    font-size: 20px;
    align-self: center;
    padding: 0 5px;
    height: auto !important;
}

/* Arrow buttons - BIGGER AND MORE VISIBLE */
.flatpickr-time .arrowUp,
.flatpickr-time .arrowDown {
    background: #0c532b;
    border-radius: 6px;
    height: 24px !important;
    width: 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.flatpickr-time .arrowUp:hover,
.flatpickr-time .arrowDown:hover {
    background: #0a4323;
}

.flatpickr-time .arrowUp::after,
.flatpickr-time .arrowDown::after {
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    margin: 0 !important;
}

.flatpickr-time .arrowUp::after {
    border-bottom: 8px solid white !important;
    border-top: none !important;
}

.flatpickr-time .arrowDown::after {
    border-top: 8px solid white !important;
    border-bottom: none !important;
}

/* AM/PM selector */
.flatpickr-am-pm {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0c532b;
    height: 50px !important;
    outline: none;
    align-self: center;
}

.flatpickr-am-pm:hover,
.flatpickr-am-pm:focus {
    background: #0c532b;
    color: white;
    border-color: #0c532b;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .flatpickr-calendar {
        font-size: 14px;
    }

    .flatpickr-months {
        padding: 15px 10px;
    }

    .flatpickr-current-month {
        font-size: 16px !important;
    }

    .flatpickr-day {
        height: 35px !important;
        line-height: 35px !important;
    }

    .flatpickr-time {
        padding: 15px 5px;
        gap: 5px;
    }

    .flatpickr-time input.flatpickr-hour,
    .flatpickr-time input.flatpickr-minute {
        height: 45px !important;
        width: 50px;
        font-size: 18px;
    }

    .flatpickr-am-pm {
        height: 45px !important;
        padding: 0 10px;
        font-size: 13px;
    }

    .flatpickr-time-separator {
        font-size: 18px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .flatpickr-calendar {
        font-size: 15px;
    }
}

/*
 * Phones: the pop-up date-range picker is a panel pinned to the bottom of the
 * screen (GRE-823).
 *
 * Anchored under its field, it ran off the screen: on the homepage search
 * sheet (static: true) the open calendar ended 164px below a 320x693 viewport
 * and 168px below a 390x844 one, so the last two weeks of the month could not
 * be reached, and the sheet it sits in cannot scroll far enough to reveal it.
 * On the booking page it depends on where the field happens to be scrolled.
 * Day cells were 39x35 and the month arrows 32x32, under the 44px a thumb
 * needs.
 *
 * Pinned to the bottom it is fully on screen wherever the field is, on every
 * page, with no measurement and no listener — every field that opens it is
 * readonly, so no keyboard ever shrinks the screen underneath it. dvh follows
 * Safari's toolbar, and max-height scrolls the panel on a phone held sideways.
 *
 * :not(.inline) leaves the calendars rendered in place — Goody's composer and
 * the product-card availability calendar — exactly as they were. Everything
 * here is below md (768px); desktop is untouched.
 */
@media (max-width: 767px) {
    .flatpickr-calendar.open:not(.inline) {
        position: fixed !important;
        top: auto !important;
        bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: 28rem !important;
        max-height: calc(100dvh - 1rem) !important;
        margin-inline: auto;
        overflow-y: auto;
        z-index: 99999 !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* The pointer at the field means nothing once the panel is not beside it. */
    .flatpickr-calendar:not(.inline)::before,
    .flatpickr-calendar:not(.inline)::after {
        display: none !important;
    }

    .flatpickr-calendar:not(.inline) .flatpickr-months {
        padding: 8px 6px;
    }

    .flatpickr-calendar:not(.inline) .flatpickr-current-month {
        padding: 0 4px !important;
        gap: 6px;
    }

    .flatpickr-calendar:not(.inline) .flatpickr-prev-month,
    .flatpickr-calendar:not(.inline) .flatpickr-next-month {
        width: 44px !important;
        height: 44px !important;
        padding: 12px !important;
        flex: 0 0 44px;
    }

    .flatpickr-calendar:not(.inline) .flatpickr-weekdays {
        padding: 8px 4px;
    }

    .flatpickr-calendar:not(.inline) .flatpickr-days {
        padding: 4px;
    }

    /* flatpickr's base stylesheet caps a day at 39px wide; let it take its column. */
    .flatpickr-calendar:not(.inline) .flatpickr-day {
        max-width: none !important;
        height: 44px !important;
        line-height: 44px !important;
    }
}