/* Load after daterangepicker.css and your existing booking CSS. */
/* Share the same calendar design across the five booking form modals. */
.rw-date-modal .modal-dialog {
    width: min(1020px, calc(100vw - 32px)) !important;
    max-width: 1020px !important;
    margin: 4rem auto;
}

.rw-date-modal .modal-content,
.rw-date-modal .modal-content.modal_content {
    width: 100% !important;
    max-width: none !important;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .2);
    overflow: visible;
}

.rw-date-modal .modal-header {
    display: block !important;
    position: relative;
    padding: 32px 56px 14px;
    border: 0;
}

.rw-date-modal .date-modal-header h4 {
    margin: 0 0 20px;
}

.rw-date-modal .pop-check-date {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100% !important;
}

.rw-date-modal .pop-check {
    flex: 1 1 auto;
    min-width: 0;
}

.rw-date-modal .pop-date {
    display: flex !important;
    flex: 0 0 520px;
    gap: 24px;
    width: 520px !important;
    max-width: 100%;
}

.rw-date-modal .pop-date .dep-ret-input,
.rw-date-modal .pop-date .first_date_input {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.rw-date-modal .pop-date .dep-ret-input input {
    width: 100%;
}

.rw-date-modal .modal-header > .close {
    position: absolute;
    top: 24px;
    right: 56px;
}

.rw-date-modal .modal-body,
.rw-date-modal .modal_body {
    padding: 12px 56px 28px;
}

.rw-date-modal .modal-footer {
    padding: 20px 0 16px;
    margin: 0 56px;
    border: 0;
    border-top: 1px solid #c8cbd0;
}

/* The plugin normally floats its popup over the form. Place it in the modal. */
.rw-date-modal .daterangepicker {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    max-width: none;
    margin: 22px 0 0;
    padding: 20px 0 0;
    border: 0;
    border-top: 1px solid #c8cbd0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    font-family: inherit;
    box-sizing: border-box;
}

.rw-date-modal .daterangepicker::before,
.rw-date-modal .daterangepicker::after,
.rw-date-modal .daterangepicker .drp-selected,
.rw-date-modal .daterangepicker .drp-buttons {
    display: none !important;
}

.rw-date-modal .daterangepicker .drp-calendar {
    float: left;
    width: calc(50% - 20px);
    max-width: none;
    box-sizing: border-box;
    padding: 0 !important;
    border: 0 !important;
}

.rw-date-modal .daterangepicker .drp-calendar.left {
    margin-right: 40px;
}

.rw-date-modal .daterangepicker.single .drp-calendar.left {
    float: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

.rw-date-modal .daterangepicker .calendar-table {
    padding: 0 !important;
    border: 0 !important;
}

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

.rw-date-modal .daterangepicker .calendar-table th,
.rw-date-modal .daterangepicker .calendar-table td {
    box-sizing: border-box;
    width: 14.285%;
    min-width: 0;
    height: 54px;
    padding: 0;
    border-radius: 2px;
    text-align: center;
}

.rw-date-modal .daterangepicker .calendar-table thead tr:first-child th {
    height: 48px;
    color: #242b33;
    font-size: 20px;
    font-weight: 600;
}

.rw-date-modal .daterangepicker .calendar-table thead tr:nth-child(2) th {
    width: 14.285%;
    height: 42px;
    color: #9a9da2;
    font-size: 15px;
    font-weight: 400;
}

.rw-date-modal .daterangepicker .calendar-table td {
    border: 1px solid #d8dadd;
    color: #515761;
    background: #fff;
    font-size: 15px;
}

/* The existing site hides outside-month cells; keep their grid width. */
.rw-date-modal .daterangepicker .calendar-table td.off {
    visibility: visible;
}

/* The original site CSS collapses outside-month cells using .ends. */
.rw-date-modal .daterangepicker .calendar-table td.ends {
    visibility: visible;
    height: 54px;
    line-height: normal;
}

.rw-date-modal .daterangepicker .calendar-table td.ends .date {
    height: auto;
}

.rw-date-modal .daterangepicker .calendar-table td.available:hover {
    border-color: #0b559d;
    color: #0b559d;
    background: #f0f7ff;
}

.rw-date-modal .daterangepicker .calendar-table td.off,
.rw-date-modal .daterangepicker .calendar-table td.disabled {
    color: #b9bcc1;
    background: #fff;
    text-decoration: none !important;
}

.rw-date-modal .daterangepicker .calendar-table td.in-range:not(.start-date):not(.end-date) {
    border-color: #b5d9f8;
    color: #fff;
    background: #91c7f4;
}

.rw-date-modal .daterangepicker .calendar-table td.active,
.rw-date-modal .daterangepicker .calendar-table td.active:hover,
.rw-date-modal .daterangepicker .calendar-table td.start-date,
.rw-date-modal .daterangepicker .calendar-table td.end-date {
    border-color: #0b559d;
    color: #fff;
    background: #0b559d;
}

.rw-date-modal .daterangepicker .calendar-table td.today:not(.active):not(.in-range) {
    box-shadow: inset 0 0 0 1px #0b559d;
}

.rw-date-modal .daterangepicker .calendar-table .month select {
    width: auto;
    max-width: 52%;
    padding: 4px 8px;
    border: 0;
    color: #242b33;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.rw-date-modal .daterangepicker .drp-calendar.left .yearselect,
.rw-date-modal .daterangepicker .drp-calendar.right:not(.has-year-change) .yearselect {
    display: none !important;
}

.rw-date-modal .daterangepicker .drp-calendar.right .month select {
    width: auto;
    appearance: none;
    pointer-events: none;
}

.rw-date-modal .daterangepicker .calendar-table .prev span,
.rw-date-modal .daterangepicker .calendar-table .next span {
    border-color: #1d2731;
}

.rw-date-modal .first-date input:focus,
.rw-date-modal .second-date input:focus {
    border-color: #2780e3;
    outline: 0;
    box-shadow: 0 0 0 1px #2780e3;
}

.rw-date-modal #applyDates {
    min-width: 164px;
    padding: 14px 26px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #0b559d;
}

.rw-date-modal #applyDates:disabled {
    color: #fff;
    background: #dfe1e4;
    cursor: not-allowed;
}

@media (max-width: 767px) {
    .rw-date-modal .modal-dialog { margin: 12px auto; }
    .rw-date-modal .modal-header { padding: 22px 20px 8px; }
    .rw-date-modal .modal-header > .close { right: 20px; top: 18px; }
    .rw-date-modal .pop-check-date { flex-wrap: wrap; }
    .rw-date-modal .pop-date { flex: 1 1 100%; width: 100% !important; gap: 12px; }
    .rw-date-modal .modal-body,
    .rw-date-modal .modal_body { padding: 12px 20px 20px; }
    .rw-date-modal .modal-footer { padding: 16px 0; margin: 0 20px; }
    .rw-date-modal .daterangepicker .drp-calendar {
        float: none;
        width: 100%;
    }
    .rw-date-modal .daterangepicker .drp-calendar.left {
        margin: 0 0 18px;
    }
    .rw-date-modal .daterangepicker .calendar-table th,
    .rw-date-modal .daterangepicker .calendar-table td { height: 44px; }
}

/* Keep one-month popups consistent with the booking popup. */
.rw-date-modal.rw-single-calendar .modal-dialog {
    width: min(560px, calc(100vw - 32px)) !important;
    max-width: 560px !important;
}

.rw-date-modal.rw-single-calendar .daterangepicker.single .drp-calendar.left {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
}

.rw-date-modal .modal-header > h4 {
    margin: 0 0 10px;
    color: #242b33;
    font-size: 20px;
    font-weight: 500;
}

.rw-date-modal .modal-body::after,
.rw-date-modal .daterangepicker .ranges::after {
    content: "";
    display: table;
    clear: both;
}

.rw-date-modal .modal-footer .btn {
    min-width: 164px;
    padding: 14px 26px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #0b559d;
}

.rw-date-modal .modal-footer .btn:disabled {
    background: #dfe1e4;
    cursor: not-allowed;
}