/* ============================================================
           DATERANGEPICKER – MODERN CALENDAR SKIN
           Copy this entire <style> block to reuse on other views.
           Requires: daterangepicker.js  |  Tested with Bootstrap 5
           ============================================================ */

/* --- Popup container --------------------------------------- *
         * Rounded card with a soft shadow; removes the default arrow  *
         * tip that appears on the border of the input field.          *
         * min-width: 7 cells × 48px + 6 gaps × 3px + 24px padding    *
         *           = 336 + 18 + 24 = 378px → rounded up to 390px.   */
.daterangepicker {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .14);
    padding: 12px;
    font-family: inherit;
    min-width: 390px;
}

    .daterangepicker::before,
    .daterangepicker::after {
        display: none;
    }

    /* --- Calendar panel (single-picker) ------------------------ *
         * The library sets max-width: 270px on .drp-calendar by       *
         * default — override it so our larger cells are not clipped.  */
    .daterangepicker .drp-calendar {
        max-width: none !important;
        width: 100%;
    }

    /* --- Calendar table base ----------------------------------- *
         * Transparent background; use border-spacing for visual gap   *
         * between cells instead of outlines / borders.                *
         * width: 100% so the table fills the available panel width.  */
    .daterangepicker .calendar-table {
        border: none;
        background: transparent;
        padding: 0;
        width: 100%;
    }

        .daterangepicker .calendar-table table {
            border-collapse: separate;
            border-spacing: 3px;
            width: 100%;
        }

        /* --- Month / Year header label ----------------------------- *
         * Bold, dark title. Applied to the <th class="month"> cell.   */
        .daterangepicker .calendar-table th.month {
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .4px;
            color: #1a1a2e;
            padding-bottom: 8px;
        }

    /* --- Month / Year dropdowns (showDropdowns: true) ---------- *
         * Slightly styled selects inside the calendar header.         */
    .daterangepicker select.monthselect,
    .daterangepicker select.yearselect {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 2px 6px;
        font-size: 13px;
        background: #fafafa;
        cursor: pointer;
    }

    /* --- Prev / Next navigation arrows ------------------------- *
         * Thinner, darker chevrons for a cleaner look.                */
    .daterangepicker .prev span,
    .daterangepicker .next span {
        border-color: #555;
        border-width: 0 2px 2px 0;
        width: 8px;
        height: 8px;
    }

    /* --- Day-of-week labels (Mon, Tue, …) ---------------------- *
         * Last <thead> row contains the day abbreviations.            */
    .daterangepicker .calendar-table thead tr:last-child th {
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .8px;
        color: #9e9e9e;
        padding-bottom: 6px;
        border: none;
        height: 28px;
    }

    /* --- All day cells – uniform size -------------------------- *
         * Fixed width + height so every cell looks the same whether   *
         * it has a price label or not.  Adjust --dp-cell-size to      *
         * resize globally (e.g. 40px for compact, 52px for larger).   */
    .daterangepicker .calendar-table td,
    .daterangepicker .calendar-table th {
        width: 48px;
        height: 48px;
        min-width: 48px;
        line-height: 1;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        vertical-align: middle;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

    /* --- Available (valid / bookable) dates -------------------- */
    .daterangepicker td.available {
        color: #1a1a2e;
    }

        .daterangepicker td.available:hover {
            background-color: #eef5ff;
            color: #0057b8;
            border-radius: 10px;
        }

    /* --- Disabled / off-month dates ---------------------------- *
         * Greyed out, no pointer — keep same cell size.               */
    .daterangepicker td.off,
    .daterangepicker td.disabled {
        color: #d4d4d4;
        cursor: default;
        pointer-events: none;
    }

    /* --- Selected (active) date -------------------------------- *
         * Filled accent background. Change the hex to match your      *
         * site's primary colour.                                       */
    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: #0057b8;
        color: #fff;
        border-radius: 10px;
    }

        .daterangepicker td.active .date-price {
            color: rgba(255, 255, 255, .75);
        }

    /* --- Today marker (not selected) --------------------------- *
         * Subtle highlight so the user can locate today quickly.      */
    .daterangepicker td.today:not(.active) {
        background-color: #f4f4f4;
        font-weight: 700;
    }

/* --- Price label below the day number ---------------------- *
         * Shown only for days that have a price entry in priceMap.    *
         * Copy .date-price + the two hide rules together.             */
.date-price {
    display: block;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: #2a9d5c;
    margin-top: 3px;
    white-space: nowrap;
    pointer-events: none; /* let clicks fall through to the parent <td> */
}
/* Hide price on off-month / disabled cells */
.daterangepicker td.off .date-price,
.daterangepicker td.disabled .date-price {
    display: none;
}

/* --- Apply / Cancel buttons -------------------------------- *
         * Rounded pill buttons consistent with the card style.        */
.daterangepicker .drp-buttons {
    border-top: 1px solid #f0f0f0;
    padding: 8px 12px;
}

.daterangepicker .applyBtn {
    background-color: #0057b8;
    border-color: #0057b8;
    border-radius: 8px;
    font-size: 13px;
}

    .daterangepicker .applyBtn:hover {
        background-color: #003f8a;
        border-color: #003f8a;
    }

.daterangepicker .cancelBtn {
    border-radius: 8px;
    font-size: 13px;
}

/* --- Loader spinner on the datepicker wrapper -------------- *
         * Appears while validDates are being recalculated after a     *
         * DepartureCode change.  Uses a ::after pseudo-element so     *
         * no extra HTML is needed — just add .datepicker-loading to   *
         * the .form-group wrapper.                                     */
.datepicker-loading {
    position: relative;
}

    .datepicker-loading::after {
        content: '';
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        border: 2px solid #e0e0e0;
        border-top-color: #0057b8;
        border-radius: 50%;
        animation: dp-spin .6s linear infinite;
    }

@keyframes dp-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}
/* ============================================================
           END DATERANGEPICKER SKIN
           ============================================================ */