/* ============================================================
   CalendarLux.css (T23, 2026-07-16) — modern calendar-popup skin
   for the Restaurant (india-village.net). Theme orange #FA8507.
   Covers:
     1) flatpickr        (all native <input type="date"> — enhanced
                          by modern-datepicker.js)
     2) jquery.datetimepicker (.date-pick / .time-pick, main.js)
   Popup styling ONLY — inputs untouched. Load AFTER the vendor CSS.
   ============================================================ */

/* ---------------- flatpickr ---------------- */
.flatpickr-calendar {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .12) !important;
    font-family: inherit !important;
    overflow: hidden;
}

    .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after,
    .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
        display: none;
    }

.flatpickr-months {
    background: #1c1c1c;
    padding: 6px 0;
}

    .flatpickr-months .flatpickr-month {
        color: #ffe3c2;
        fill: #ffe3c2;
        height: 36px;
    }

    .flatpickr-months .flatpickr-prev-month,
    .flatpickr-months .flatpickr-next-month {
        color: #FA8507;
        fill: #FA8507;
        top: 6px;
        padding: 8px 12px;
    }

        .flatpickr-months .flatpickr-prev-month:hover svg,
        .flatpickr-months .flatpickr-next-month:hover svg {
            fill: #ffb066;
        }

.flatpickr-current-month {
    font-size: 14px;
    font-weight: 700;
    padding-top: 4px;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        background: #1c1c1c;
        color: #ffe3c2;
        font-weight: 700;
        border-radius: 8px;
    }

        .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
            background: #2b2b2b;
        }

    .flatpickr-current-month input.cur-year {
        color: #ffe3c2;
        font-weight: 700;
    }

/* T385 (2026-08-17) — the YEAR was dropping onto a second line and hanging out of the
   dark header band ("year is not visible properly", owner report on the Food Order cart).
   MEASURED CAUSE, not guessed: the theme's own global rule in style.css —
       .form-select, select { display: block; width: 100%; ... }
   matches flatpickr's month <select class="flatpickr-monthDropdown-months">. A block-level
   select consumes the whole line, so the inline-block year wrapper next to it wraps below,
   where it overflowed .flatpickr-current-month (fixed height:34px) by 9px and sat 1px past
   the bottom of the #1c1c1c header band. The cream #ffe3c2 above was never the problem —
   the effective background behind the year IS the dark band (contrast is fine).
   Vendor flatpickr.min.css never sets `display` here, so the bare `select` (0,0,1) rule was
   winning by default; this two-class selector (0,2,0) beats it WITHOUT !important, and
   CalendarLux.css is already loaded after the vendor CSS (see _Layout.cshtml).
   ⚠ Scoped under .flatpickr-current-month on purpose — it must never leak to the site's
   other <select> elements, which legitimately want the theme's block/full-width styling. */
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        display: inline-block;
        width: auto;
        height: auto;
        line-height: normal;
        vertical-align: middle;
        padding: 0 0 0 4px;
    }

    .flatpickr-current-month .numInputWrapper {
        vertical-align: middle;
    }

.numInputWrapper span.arrowUp:after { border-bottom-color: #FA8507; }
.numInputWrapper span.arrowDown:after { border-top-color: #FA8507; }

span.flatpickr-weekday {
    color: #c2660a;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.flatpickr-day {
    border-radius: 9px;
    font-size: 13px;
    border: none;
    transition: background .12s ease, color .12s ease;
}

    .flatpickr-day:hover,
    .flatpickr-day.prevMonthDay:hover,
    .flatpickr-day.nextMonthDay:hover {
        background: #ffefdd;
        border-color: #ffefdd;
        color: #1c1c1c;
    }

    .flatpickr-day.today {
        border: none;
        box-shadow: inset 0 0 0 1.5px #FA8507;
        font-weight: 700;
    }

        .flatpickr-day.today:hover {
            background: #ffefdd;
            color: #1c1c1c;
        }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
        background: linear-gradient(135deg, #FA8507, #e06f00);
        border-color: transparent;
        color: #fff;
        font-weight: 700;
        box-shadow: 0 3px 9px rgba(250, 133, 7, .45);
    }

    .flatpickr-day.flatpickr-disabled,
    .flatpickr-day.flatpickr-disabled:hover,
    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        color: #d9d2c6;
    }

/* ---------------- jquery.datetimepicker ---------------- */
.xdsoft_datetimepicker {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22), 0 4px 14px rgba(0, 0, 0, .12) !important;
    padding: 10px 12px !important;
    font-family: inherit !important;
    background: #fff !important;
}

    .xdsoft_datetimepicker .xdsoft_monthpicker {
        background: #1c1c1c;
        border-radius: 10px;
        padding: 4px 6px;
        margin-bottom: 6px;
    }

    .xdsoft_datetimepicker .xdsoft_label {
        background: transparent !important;
        color: #ffe3c2 !important;
        font-weight: 700 !important;
        font-size: 13px !important;
    }

        .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
            border-radius: 10px !important;
            border: none !important;
            box-shadow: 0 12px 30px rgba(0, 0, 0, .2) !important;
        }

            .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
                background: #FA8507 !important;
                box-shadow: none !important;
                color: #fff !important;
            }

    .xdsoft_datetimepicker .xdsoft_prev,
    .xdsoft_datetimepicker .xdsoft_next,
    .xdsoft_datetimepicker .xdsoft_today_button {
        opacity: 1;
        filter: invert(62%) sepia(64%) saturate(2600%) hue-rotate(357deg) brightness(101%) contrast(96%);
    }

    .xdsoft_datetimepicker .xdsoft_calendar th {
        background: transparent !important;
        border: none !important;
        color: #c2660a !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .xdsoft_datetimepicker .xdsoft_calendar td {
        border: none !important;
        background: transparent !important;
        border-radius: 9px;
        height: 32px;
        text-align: center !important;
        font-size: 12.5px !important;
        color: #2c2c2c !important;
        transition: background .12s ease, color .12s ease;
    }

        .xdsoft_datetimepicker .xdsoft_calendar td > div {
            padding-right: 0 !important;
            text-align: center;
        }

        .xdsoft_datetimepicker .xdsoft_calendar td:hover {
            background: #ffefdd !important;
            color: #1c1c1c !important;
        }

        .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
        .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
            background: linear-gradient(135deg, #FA8507, #e06f00) !important;
            color: #fff !important;
            font-weight: 700;
            box-shadow: 0 3px 9px rgba(250, 133, 7, .45) !important;
        }

        .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today:not(.xdsoft_current) {
            color: #1c1c1c !important;
            box-shadow: inset 0 0 0 1.5px #FA8507 !important;
            font-weight: 700;
        }

        .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month {
            color: #d9d2c6 !important;
            opacity: 1 !important;
        }

    .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
        border: 1px solid #f4e7d6 !important;
        border-radius: 10px;
    }

        .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div {
            border: none !important;
            font-size: 12.5px !important;
            border-radius: 8px;
        }

            .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
                background: #ffefdd !important;
                color: #1c1c1c !important;
            }

            .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
                background: linear-gradient(135deg, #FA8507, #e06f00) !important;
                color: #fff !important;
                box-shadow: none !important;
            }

/* ============================================================
   T377b (2026-08-17) — PHONE BOTTOM SHEET. This is the FIRST @media block
   this file has ever had; the responsive layer is genuinely new.

   Pairs with disableMobile:true in modern-datepicker.js. Before that, touch
   devices never rendered .flatpickr-calendar at all, so none of this file
   applied and the guest saw raw browser chrome.

   ⚠ !important IS MANDATORY on every positioning property, not stylistic:
   flatpickr writes position/top/left INLINE on .flatpickr-calendar.open at
   open time, and the vendor sheet hard-codes width:307.875px on the calendar,
   .flatpickr-days and .dayContainer. Inline styles beat any selector, so the
   sheet cannot win without it.

   ⚠ SCOPED TO .flatpickr-* ONLY. This stylesheet is dual-purpose — lines
   126-239 skin jquery.datetimepicker (.xdsoft_*, used by .date-pick/.time-pick
   on the Reservation page). Never widen these selectors.

   Bottom sheet at <=575.98px is this estate's established convention
   (.fo-sheet in FoodOrder.css is the local precedent; .oft-sheet/.rvlc-/.rvga-/
   .rvgc-/.rvpdf- in RV). 575.98px matches MyOrders.css:352-355, which already
   stacks the date filter at exactly that boundary — 575px would leave a seam.
   ============================================================ */
@media (max-width: 575.98px) {
    .flatpickr-calendar.open {
        position: fixed !important;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: 18px; /* room for the grab handle */
        border-radius: 18px 18px 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 -18px 50px rgba(0, 0, 0, .32) !important;
        animation: none !important;
    }

    /* Grab handle. ⚠ display:block is REQUIRED, not decorative: the
       .flatpickr-calendar.arrowTop:before rule at the top of this file sets
       display:none, and flatpickr adds .arrowTop/.arrowBottom to this same
       element — without an explicit display the handle is silently hidden. */
    .flatpickr-calendar.open::before {
        content: "";
        display: block !important;
        position: absolute;
        top: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 42px;
        height: 4px;
        border-radius: 4px;
        background: rgba(250, 133, 7, .55);
        border: 0 !important;
        margin: 0 !important;
        z-index: 5;
    }

    /* The vendor pins these to 307.875px; a full-width sheet must free all
       three or the grid stays a narrow column inside a wide sheet. */
    .flatpickr-calendar.open .flatpickr-days,
    .flatpickr-calendar.open .flatpickr-rContainer,
    .flatpickr-calendar.open .flatpickr-innerContainer {
        width: 100% !important;
        max-width: 100% !important;
    }

    .flatpickr-calendar.open .dayContainer {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Vendor day cells are 39px — below the 44px target size. */
    .flatpickr-calendar.open .flatpickr-day {
        max-width: none !important;
        height: 44px;
        line-height: 44px;
        font-size: 15px;
    }

    .flatpickr-calendar.open .flatpickr-months {
        padding: 10px 0;
    }

    .flatpickr-calendar.open span.flatpickr-weekday {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
    .flatpickr-calendar.open {
        animation: none !important;
        transition: none !important;
    }
}