/*
 * Shared travel-date modal.
 *
 * The site's date fields all run on daterangepicker, wired up by js/datepicker-manager.js - which
 * carries the parts that matter (session persistence, the two-night minimum, blocked-date checks,
 * live quotes, search filtering). None of that changes here. This only moves the calendar out of
 * its small drop-down and into a centred modal, and restyles it.
 *
 * EVERY calendar rule below is scoped inside .dle-date-modal. A daterangepicker rendered anywhere
 * else on the site keeps the look it already had, so this cannot change a page it was not applied
 * to.
 */

:root {
    --dle-gold: #aa8453;
    --dle-gold-light: #c99a5b;
    --dle-modal-bg: #222;
    --dle-modal-panel: #2b2b2b;
    --dle-modal-line: rgba(255, 255, 255, 0.1);
    --dle-modal-text: rgba(255, 255, 255, 0.85);
    --dle-modal-muted: rgba(255, 255, 255, 0.45);
    --dle-blocked: rgba(0, 0, 0, 0.15);
}

/* ---------- SHELL ---------------------------------------------------- */

.dle-date-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    display: none;
}

.dle-date-modal.is-open {
    display: block;
}

/* Stop the page behind the modal scrolling under it. */
body.dle-date-modal-lock {
    overflow: hidden;
}

.dle-date-modal-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.72);
}

.dle-date-modal-dialog {
    position: relative;
    z-index: 1;
    width: calc(100% - 30px);
    max-width: 880px;
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background-color: var(--dle-modal-bg);
    border: 1px solid var(--dle-modal-line);
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

/* ---------- HEAD / FOOT ---------------------------------------------- */

.dle-date-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--dle-modal-line);
    flex: 0 0 auto;
}

.dle-date-modal-title {
    font-family: 'Gilda Display', serif;
    font-size: 20px;
    line-height: 1.2;
    color: #fff;
}

.dle-date-modal-close {
    background: none;
    border: 0;
    padding: 0 4px;
    font-size: 30px;
    line-height: 1;
    color: var(--dle-modal-muted);
    cursor: pointer;
}

.dle-date-modal-close:hover {
    color: #fff;
}

.dle-date-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 14px 4px;
}

.dle-date-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    border-top: 1px solid var(--dle-modal-line);
    flex: 0 0 auto;
}

.dle-date-modal-summary {
    font-size: 14px;
    color: var(--dle-modal-muted);
}

.dle-date-modal-summary strong {
    color: #fff;
    font-weight: 600;
}

.dle-date-modal-summary .dle-date-nights {
    color: var(--dle-gold);
}

.dle-date-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.dle-date-modal-clear {
    background: none;
    border: 1px solid var(--dle-gold);
    color: var(--dle-gold);
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 11px 24px;
    cursor: pointer;
}

.dle-date-modal-clear:hover {
    background-color: rgba(170, 132, 83, 0.15);
    color: var(--dle-gold-light);
    border-color: var(--dle-gold-light);
}

.dle-date-modal-done {
    background-color: var(--dle-gold);
    border: 0;
    color: #fff;
    font-family: 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 12px 30px;
    cursor: pointer;
}

.dle-date-modal-done:hover {
    background-color: var(--dle-gold-light);
}

/* ---------- THE CALENDAR INSIDE THE MODAL ---------------------------- */

/*
 * daterangepicker positions itself absolutely against the input it belongs to and re-runs that
 * maths on every show. Inside the modal it has to sit in normal flow instead, so the positioning
 * is neutralised here rather than by patching the library.
 *
 * display is deliberately NOT forced: a page can have more than one date input (the homepage has
 * the hero search and the booking band), each with its own picker parented into this modal, and
 * the library's own show/hide is what keeps only the active one visible.
 */
.dle-date-modal .daterangepicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The little caret that pointed at the input. Nothing to point at now. (The :after is reused as a
   clearfix for the floated months further down, so only :before is removed here.) */
.dle-date-modal .daterangepicker:before {
    display: none !important;
}

.dle-date-modal .daterangepicker:after {
    border: 0 !important;
    position: static !important;
}

/*
 * Two months across.
 *
 * The library already floats .drp-calendar side by side above 564px, and that float is left alone
 * on purpose: flex would be the obvious choice, but show/hide is jQuery .show()/.hide(), which
 * writes display inline - so a `display: flex` rule would either be beaten by the inline
 * `display: block` or, with !important, would beat the inline `display: none` and leave every
 * picker on the page visible at once. Floats sidestep display entirely.
 *
 * What does need undoing is the 270px cap, so the two months fill the wider modal.
 */
.dle-date-modal .daterangepicker .drp-calendar {
    max-width: none;
    width: 50%;
    padding: 10px 14px 18px;
}

.dle-date-modal .daterangepicker .drp-calendar.right {
    margin: 0 !important;
    border-left: 0 !important;
}

/* Contain the floated months. */
.dle-date-modal .daterangepicker:after {
    content: '';
    display: table;
    clear: both;
}

.dle-date-modal .daterangepicker .drp-calendar .calendar-table {
    padding-right: 0 !important;
    background-color: transparent;
    border: 0;
}

.dle-date-modal .daterangepicker .calendar-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

/* Month name */
.dle-date-modal .daterangepicker th.month {
    font-family: 'Gilda Display', serif;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    padding-bottom: 14px;
}

/* Weekday initials */
.dle-date-modal .daterangepicker thead tr:last-child th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dle-modal-muted);
    padding-bottom: 6px;
}

.dle-date-modal .daterangepicker td,
.dle-date-modal .daterangepicker th {
    min-width: 40px;
    width: 14.28%;
    height: 44px;
    border: 0;
    border-radius: 3px;
    font-size: 15px;
    vertical-align: middle;
}

.dle-date-modal .daterangepicker td.available {
    color: var(--dle-modal-text);
}

.dle-date-modal .daterangepicker td.available:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/*
 * `off` means three different things in this library, and they must not be styled alike:
 *
 *   off + ends      a day belonging to the neighbouring month, padding the first and last week
 *   off + disabled  a date before minDate, after maxDate, OR rejected by isInvalidDate - which is
 *                   how datepicker-manager.js marks the nights a property is already booked
 *
 * Hiding everything with `off` would therefore make unavailable nights invisible on a property
 * page rather than visibly struck through, which is the one thing a guest most needs to see.
 */

/*
 * Booked, past, or otherwise unselectable - visible, and obviously not on offer. Sunk below the
 * surrounding cells rather than just dimmed, so a glance at the month separates what is open from
 * what is gone without having to read each number.
 */
.dle-date-modal .daterangepicker td.off.disabled,
.dle-date-modal .daterangepicker td.disabled,
.dle-date-modal .daterangepicker option.disabled {
    color: rgba(255, 255, 255, 0.26);
    text-decoration: line-through;
    background-color: var(--dle-blocked);
    cursor: not-allowed;
}

/*
 * Neighbouring-month days. Hidden rather than removed so the grid keeps its shape and the weekday
 * columns still line up, and pointer-events off so a hidden cell cannot be clicked.
 *
 * Last, and !important, because a cell can carry both .ends and .disabled (or .in-range, when a
 * selected range runs past the month edge) and those rules have equal specificity - whichever came
 * last would otherwise win.
 */
.dle-date-modal .daterangepicker td.off.ends {
    visibility: hidden !important;
    pointer-events: none;
    background-color: transparent !important;
}

/* The chosen range */
.dle-date-modal .daterangepicker td.in-range {
    background-color: rgba(170, 132, 83, 0.22);
    color: #fff;
    border-radius: 0;
}

.dle-date-modal .daterangepicker td.start-date,
.dle-date-modal .daterangepicker td.end-date,
.dle-date-modal .daterangepicker td.active,
.dle-date-modal .daterangepicker td.active:hover {
    background-color: var(--dle-gold);
    color: #fff;
    font-weight: 600;
}

.dle-date-modal .daterangepicker td.start-date {
    border-radius: 3px 0 0 3px;
}

.dle-date-modal .daterangepicker td.end-date {
    border-radius: 0 3px 3px 0;
}

.dle-date-modal .daterangepicker td.start-date.end-date {
    border-radius: 3px;
}

/*
 * Changeover days: half the day is spoken for.
 *
 * Tagged by DatePickerManager.turnoverClasses() - dle-turn-in when the night before is taken (so
 * the day is good for an arrival), dle-turn-out when the night of is taken (good for a departure).
 * Drawn as a diagonal so the free half is obvious at a glance; the cell stays fully selectable,
 * because it always was.
 *
 * :not(.off) keeps it off past dates, which are already shaded whole.
 */
.dle-date-modal .daterangepicker td.dle-turn-in:not(.off) {
    background-image: linear-gradient(to bottom right,
        var(--dle-blocked) 0, var(--dle-blocked) 50%, transparent 50%);
}

.dle-date-modal .daterangepicker td.dle-turn-out:not(.off) {
    background-image: linear-gradient(to bottom right,
        transparent 0, transparent 50%, var(--dle-blocked) 50%);
}

/* A single free night between two bookings - both halves spoken for. */
.dle-date-modal .daterangepicker td.dle-turn-in.dle-turn-out:not(.off) {
    background-image: linear-gradient(var(--dle-blocked), var(--dle-blocked));
}

/* Once chosen, the cell is the guest's - the diagonal would only muddy the gold. */
.dle-date-modal .daterangepicker td.start-date:not(.off),
.dle-date-modal .daterangepicker td.end-date:not(.off),
.dle-date-modal .daterangepicker td.active:not(.off),
.dle-date-modal .daterangepicker td.in-range:not(.off) {
    background-image: none;
}

/*
 * Cleared state. The library always holds a real start and end date, so there is nothing to unset -
 * the selection is hidden instead, and put back the moment the guest clicks a day again.
 */
.dle-date-modal .daterangepicker.dle-dates-cleared td.in-range,
.dle-date-modal .daterangepicker.dle-dates-cleared td.start-date,
.dle-date-modal .daterangepicker.dle-dates-cleared td.end-date,
.dle-date-modal .daterangepicker.dle-dates-cleared td.active,
.dle-date-modal .daterangepicker.dle-dates-cleared td.active:hover {
    background-color: transparent;
    color: var(--dle-modal-text);
    font-weight: 400;
    border-radius: 3px;
}

.dle-date-modal .daterangepicker.dle-dates-cleared td.available:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Month arrows */
.dle-date-modal .daterangepicker th.prev,
.dle-date-modal .daterangepicker th.next {
    color: var(--dle-gold);
    cursor: pointer;
}

.dle-date-modal .daterangepicker th.prev:hover,
.dle-date-modal .daterangepicker th.next:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.dle-date-modal .daterangepicker th.prev span,
.dle-date-modal .daterangepicker th.next span {
    border-color: var(--dle-gold);
}

/* Parts of the library the modal has no use for. */
.dle-date-modal .daterangepicker .ranges,
.dle-date-modal .daterangepicker .drp-buttons,
.dle-date-modal .daterangepicker .calendar-time {
    display: none !important;
}

/* ---------- MOBILE: STACK THE MONTHS --------------------------------- */

@media screen and (max-width: 767px) {

    .dle-date-modal-dialog {
        width: calc(100% - 16px);
        max-height: calc(100vh - 20px);
    }

    .dle-date-modal-head,
    .dle-date-modal-foot {
        padding: 14px 16px;
    }

    .dle-date-modal-body {
        padding: 4px 6px;
    }

    /* One month per row, scrolled through vertically. Covers 564-767px too, where the library
       has floated them but the modal is too narrow for two across. */
    .dle-date-modal .daterangepicker .drp-calendar {
        float: none !important;
        clear: both !important;
        width: 100%;
        padding: 6px 6px 20px;
    }

    .dle-date-modal .daterangepicker .drp-calendar.right {
        border-top: 1px solid var(--dle-modal-line);
        padding-top: 18px;
    }

    .dle-date-modal .daterangepicker td,
    .dle-date-modal .daterangepicker th {
        height: 42px;
        min-width: 0;
        font-size: 14px;
    }

    .dle-date-modal-foot {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dle-date-modal-summary {
        text-align: center;
    }

    .dle-date-modal-actions {
        width: 100%;
    }

    .dle-date-modal-clear {
        flex: 0 0 auto;
        padding: 14px 12px;
    }

    .dle-date-modal-done {
        flex: 1 1 auto;
        padding: 14px 20px;
    }
}

/* The library hides the second month below its own breakpoint; the modal wants it either way. */
.dle-date-modal .daterangepicker.show-calendar .drp-calendar {
    display: block;
}